如何滑动页面,当元素出现在当前屏幕时,才执行动画


比如努比亚这个页面http://www.nubia.com/nubiaz11max

当屏幕滚动到这个位置时,才执行了动画,请问这个是什么插件呢?


看上图

你问的效果就是,橙色容器从下方进入可视区域时(或者进入一段高度后),容器内的动画播放。

var eTop=$(element).offset().top;//橙色容器距离整个页面顶部的距离
var wTop=$(window).height();//绿色框可视区域的高度
window.onresize=funciton(){
var wTop=$(window).height();//缩放窗口这个高度会改变,需要再取得
}
$(window).scroll(funciont(){
  var dTop = $(document).scrollTop();//绿色框可视区域上面到黑色页面顶部的距离,会实时改变
});

所以当橙色容器进入可视区域怎么判断?

//放在scroll事件里面
if(dTop+wTop > eTop){//动画播放事件}

就这样,当可视区域上面的高度+可视区域高度>容器距离顶部高度,我们就知道容器进入【可视区底部】了
如果你想让容器进入一段距离(比如100px)再触发动画?

//放在scroll事件里面
if(dTop+wTop-100 > eTop){//动画播放事件}

通过js检测scollTop来触发事件,简单来说就是滚轮距离到你这一页就执行


检测浏览器滚动事件就好了,不用插件。



相关阅读:
intell idea打开项目后卡住,界面一直白色,求拯救!
在前端工程化的趋势下,php还有必要去渲染视图层吗?
奇异的代码 之 PHP中的错误和异常
用ajax调取的图片url,图片是存在webroot/images/目录下,为什么图片不能及时加载?
kill命令如何一次杀死多个进程
求react 中使用fetch的demo
大类点击之后得到的列表用pagination 插件进行了ajax分页问题
关于正确理解javascript的同步,异步的执行,Event Loop事件循环,异步执行完如何通知主线程的demo
webpack 怎么引入semantic-ui?
Cordova做的APP里,希望点击按钮时的颜色变化更明显一些,以便更清楚地给用户提示,该怎么弄?
ipad调用UIActivityViewController时系统分享不能完全显示。
GitLab配置CAS认证,前端WEB正常. 但是做git clone等操作时报错如下
django 如何实现文章按时间归档啊
angularjs ng-bind的用法
为什么start = parseInt(spans[this.index].style.top);是undefined?
vue单页面能调到新的页面吗?
HTML 5输入框只能输入汉字、字母、数字、标点符号?正则如何写?
koa+mysql ,插入数据库数据成功,但是无法将数据返回给前台
laravel自带的users表不能被修改吗?
一般在公司开发的话,框架用的多还是原生的PHP+MYSQL用的多呢??



快速导航

Copyright © 2016 phpStudy |