wow.js

滚动时显示（呈现）Animations 动画

官网：

wow.js — Reveal Animations When Scrolling (wowjs.uk)

Github：

GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page

使用方式

资源引用

1、引用 Animate.css

(You can link to another CSS animation library by changing wow.js settings)

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

2、引用并初始化 wow.js

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

让指定的元素呈现动画

1、使用默认动画

Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.
(You can change this CSS class in the WOW settings to avoid name conflicts.)

<div class="wow">
    Content to Reveal Here
</div>

2、使用指定动画

Pick an animation style in Animate.css , then add the CSS class to the HTML element

<div class="wow bounceInUp">
    Content to Reveal Here
</div>

You’re done!

Now your animations will be revealed when the user scrolls.

Check these examples of wow.js + Animate.css uses:

* MaterialUp
* Fliplingo
* Streamline Icons

高级参数

data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated
 

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
</section>

Customize Settings

boxClass: Class name that reveals the hidden box when user scrolls.

animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)

offset: Define the distance between the bottom of browser viewport and the top of hidden box.
When the user scrolls and reach this distance the hidden box is revealed.

mobile: Turn on/off wow.js on mobile devices.

live: consatantly check for new WOW elements on the page.

wow = new WOW(
{
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0,          // default
    mobile:       true,       // default
    live:         true        // default
})
wow.init();