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

posted @ 2020-05-25 18:39  胡炖鱼  阅读(529)  评论(0)  编辑  收藏  举报