WOWJS+animate滚动特效
Posted 叩首问路 码梦人生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WOWJS+animate滚动特效相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script> <style> *{ margin: 0px; padding: 0px; } .nav{ width: 1000px; height: 1080px; background-color: bisque; } .nav h1{ padding-top:300px ; padding-left: 300px; } .ban{ width: 1000px; height: 1080px; background-color: cadetblue; } .ban h2{ padding: 500px 0px 0px 500px; } </style> </head> <body> <div class="nav"> <h1 class="wow fadeInUp">我我我就是对的点击打开手机大家都</h1> </div> <div class="ban"> <h2 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="500" data-wow-iteration="1">担惊受恐超级傻空数据采集</h2> </div> </body> <script> wow = new WOW( { boxClass: \'wow\', // 默认属性名 animateClass: \'animated\', // 默认触发的动画类(包含在animate css中) offset: 0, // 为所有添加wow的元素设置 data-wow-delay属性 的默认值 mobile: true, // 是否在移动设备中开启动画 live: true // 持续监测页面中是否插入新的wow元素 } ); wow.init(); </script> </html>
使用wowjs动画库结合animate.css实现。
animate.css https://animate.style/
wow wowjs可以在网页滚动时, 展示css动画,是animater的好朋友, wowjs官方实例演示链接: https://mynameismatthieu.com/WOW/
https://www.cnblogs.com/yangjunfei/p/6746926.html
https://www.jianshu.com/p/7d83fb64b1a9?utm_source=oschina-app
以上是关于WOWJS+animate滚动特效的主要内容，如果未能解决你的问题，请参考以下文章