米
心情
所有
图集
登录
搜索
原创
WOW.js加animate.css – 让页面滚动更有趣，页面滚动到div节点显示动效
龙的传人
发布于:2020-08-20
> 很多页面用户在鼠标向下滚动的时候，有些元素会产生细小的动画效果。 虽然动画比较小，但却能吸引你的注意。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。 下载地址： animate.css http://micuer.com/public/soft/animate.css wow.min.js http://micuer.com/public/soft/wow.min.js > 使用教程： 1:引入相关插件以及css插件 ``` <link rel="stylesheet" href="css/animate.min.css"> <script src="__STATIC__/js/wow.min.js"></script> ``` 2：页面布局添加class ``` <div class="wow slideInLeft"></div> <div class="wow slideInRight"></div> ``` 3:页面添加class 以及 时间显示 ``` <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div> ``` 4:页脚js初始化 ``` new WOW().init(); ``` 如果需要自定义配置，可如下使用： ``` var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }); wow.init(); ``` 其他动效可参考地址： https://www.dowebok.com/131.html
注:原创不易,转载请注明出处(
https://micuu.com/new/851.html
)，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。
最后修改与 2022-02-18
上一篇：
抖音亚鑫掉粉,到底是什么原因导致的？
下一篇：
动效，类似wow.js-Html页面动画效果插件scrollReveal.js使用教程
▶
珍藏视频
▶
10分钟高效燃脂
▶
30天高效瘦脸操
▶
5分钟缓解颈椎操
友人
→
微博
→
全民K歌
→
唱吧
→
今日头条
→
悠悠网
→
科技小锅盖
→
彼岸桌面
→
阮一峰
→
laravel社区
→
V2ex
→
掘金
+
更多
