wsw.js 使用方法

使用方法：

1、wow.js依赖于animate.css，首先需要在 head内引入animate.css或者animate.min.css。

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

2、引入wow.js或者wow.min.js，然后js文件里再写一行代码。

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

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

<div class="wow slideInLeft" 
    data-wow-duration="2s" //动画持续时间
    data-wow-offset="10"  //动画延迟时间
    data-wow-iteration="10">//动画执行次数
</div>

原码演示

<!DOCTYPE html>
<html>
<head>
    <title>wow演示</title>
    <meta charset="utf-8">

    <!-- 1.引入wow依赖的animate.css -->
    <link href="css/animate.css" rel="stylesheet" type="text/css">
    <!-- 2.引入wow.js 文件 -->
    <script type="text/javascript" src="js/wow.js"></script>
    <!-- 3.now 对象 -->
    <script type="text/javascript">
        new WOW().init();
        // 可选的参数
        // wow = new WOW({
        //     boxClass:     'wow',         //WOW.js需要执行动画的元素的class    
        //     animateClass: 'animated',   //animation.css 动画的 class
        //     offset:       0,            //距离可视区域多少开始执行动画    
        //     mobile:       true,          //是否在移动设备上执行动画     
        //     live:         true           //异步加载的内容是否有效
        // })
        // wow.init();
    </script>
</head>
<body>
    <div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s" data-wow-offset="1000"  data-wow-iteration="1" style="width: 500px;height: 2000px;background-color: #ccc;position: absolute;left: 50%;margin-top: 0px;margin-left: -250px;margin-bottom: 50px">
        wow 动画演示
    </div>  
    <!-- slideInLeft         动画样式 -->
    <!-- data-wow-duration   动画持续时间 -->
    <!-- data-wow-delay      动画延迟时间 -->
    <!-- data-wow-offset     元素的位置（左上角的位置）露出后距离底部多少像素时执行 -->
    <!-- data-wow-iteration  动画执行次数 -->
</body>
</html>

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

猜你喜欢