qcBlog wow动画使用案例

wow动画使用案例

发布时间：2023-04-24 13:48:58

修改时间：2023-04-24 13:48:58

总阅读数：300

今日阅读数：0

昨日日阅读数：0

字数：2969

wow动画使用案例

介绍

animate官网： https://animate.style/

wow官网： https://www.delac.io/WOW/docs.html

引入animate样式

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
  />

引入wow js

 <script type="text/javascript" src="https://www.delac.io/WOW/dist/wow.min.js"></script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wow动画演示</title>
    <link rel="stylesheet" type="text/css" href="./css/animate.min.css"/>
    <script type="text/javascript" src="./js/dist_wow.js"></script>
    <script>

        new WOW({
                boxClass: 'wow',      // animated element css class (default is wow)
                // animateClass: 'animated', // animation css class (default is animated) //animate3及以下使用
                animateClass: 'animate__animated', // animation css class (default is animated) //animate4使用
                offset: 0,          // distance to the element when triggering the animation (default is 0)
                mobile: true,       // trigger animations on mobile devices (default is true)
                live: true,       // act on asynchronously loaded content (default is true)
                callback: function (box) {
                    // the callback is fired every time an animation is started
                    // the argument that is passed in is the DOM node being animated
                },
                scrollContainer: null // optional scroll container selector, otherwise use window
            }
        ).init();
    </script>
</head>
<body>
<div style="display: flex;justify-content: space-between">

    <div class="wow animate__bounceInLeft" data-wow-duration="1s" data-wow-delay="0.3s"
         style="background-color: cornflowerblue;width: 300px;height: 150px">
        animate__bounceInLeft
    </div>

    <div class="wow animate__heartBeat" data-wow-duration="1s" data-wow-delay="0.0s"
         style="background-color: cornflowerblue;width: 300px;height: 150px">
        animate__heartBeat
    </div>

    <div class="wow animate__jackInTheBox" data-wow-duration="1s" data-wow-delay="0.3s"
         style="background-color: cornflowerblue;width: 300px;height: 150px">
        animate__jackInTheBox
    </div>

    <div class="wow animate__bounceInRight" data-wow-duration="1s" data-wow-delay="0.3s"
         style="background-color: cornflowerblue;width: 300px;height: 150px">
        animate__bounceInRight
    </div>

</div>


</body>
</html>