WOW.js——在页面滚动时展现动感的元素动画效果

插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感。

当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注意力。

WOW官网https://www.delac.io/wow/docs.html

使用教程

1.WOW.js 依赖 animate.css

可以通过更改设置链接到另一个CSS动画库,在 head内引入animate.css或者animate.min.css。

WOW.js——在页面滚动时展现动感的元素动画效果

 

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

2.引入wow.js或者wow.min.js,然后js文件里再写入代码

WOW.js——在页面滚动时展现动感的元素动画效果

 

 

<script src="js/wow.min.js"></script>
 <script>
     new WOW().init();
 </script>

如果需要自定义配置,可如下使用:

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

3.在块状元素内添加相应的class类名就能实现相应的动画

data-wow-duration: 动画持续时间
data-wow-delay: 动画延迟时间
data-wow-offset: 元素的位置露出后距离底部多少像素执行
data-wow-iteration: 动画执行次数

这四个属性可选可不选。

例子:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"> </section>
<!-- slideInLeft说明了动画的样式,是从左边滑动出来的 -->
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
</section>
可以在以下网址中参考动画样式https://www.helloweba.net/demo/2018/wowjs/

 

 

WOW.js——在页面滚动时展现动感的元素动画效果

 

上一篇:HDU-4847-Wow!Such Doge!(嘿嘿嘿, 水题)


下一篇:springboot练习笔记