Animate.min.css框架运用

Animate.min.css运用

先进入官网点击几下便会发觉其中的趣味 Animate.css展示官网

这里教教大家简单的运用animate框架，先看看具体展示的效果如下链接🔗

运用animate.css案例展示入口

当然这里放上两个效果图供大家观看，具体的效果可以通过链接查看

说实话写这篇博客时被这两gif图要晃晕了 2333

对于刚接触的新手来数如何运用这个好看实用又简单的框架呢，很简单，在html先用link引入框架，再在个想添加动画的元素赋予相应效果的classname既可以(许多的效果可以自行进官网查看)

<link rel="stylesheet" href="css/animate.css">

 <div class="animated bounceInDown"></div>

在这个案例中其实只运用到了 animated bounceInLeft和animated bounceInRight，当然在具体的布局中这俩个也是最实用的。

对于页面为什么会根据视口出现效果，我运用了jQurey动态监控两滑轮在滚动时判断页面中的子元素的与文档的距离，在元素的最下端都进入视口的时候给它赋予需要增加的动画classname，实现这样的效果。

~~~~~~~~~ end ~~~~~~~~~