页面动画的问题,滚动到当前视野播放,不滚动到不播放如何实现

webtimes
  • 251

像很多首页那样的不是分屏,而是分块,页面滚动在当前视野才会播放动画,请教大家大概的设计思路是什么

回复
阅读 2.6k
5 个回答

使用jquery中scrollTop()以及offset()判断当前窗口是否包含动画,如果包含,就开始播放

你可以理解为按锚点加载的动画,一个页面从上到下标记了N多的锚点,当页面滚动到对应的锚点就加上class(如:.animate-play)来调用样式内的动画。你可以参考这个插件来扩展思路https://github.com/yckart/jquery.scrollto.js

谷歌:视差滚动;
JQ有插件用;其他也有很多实现;

1)监听window的scroll事件
2)使用Dom API getBoundingClientRect()判断动画容器是否在当前的viewport范围之内
如果在范围内就播放,不再的就停止动画

jquery有一种插件叫in-viewport

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏