使用Animate.css为你的页面添加动画

在本文中将使用animate.css为页面添加动画。

相关链接:

相关动画:https://animate.style/#usage

参考文章:https://segmentfault.com/q/1010000007517414?_ea=1369914

可视区域动画播放

??? 原理分析

参考:https://segmentfault.com/q/1010000007517414?_ea=1369914

可视区域动画图示

红色容器从下方进入可视区域时(或者进入一段高度后),容器内的动画播放。

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

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

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

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

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