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

2024-01-27 12:18:22

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

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

使用教程

1.WOW.js 依赖 animate.css。

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

2.引入wow.js或者wow.min.js，然后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/

码农公寓