Add initial animation effects to the page

When adding initial animation effects to the page, I accidentally touch wow.js. This animation library cooperates with Animate.css to quickly create animation effects according to templates, although the animation effects are the same as those in ppt. . .

Environment settings

To add animation effects, you must first set the environment. The first step is to introduce the corresponding js and css
. The js that needs to be imported: wow.js
In this case, it is recommended to introduce this js in the head, otherwise the page may be loaded first and then the animation will appear. In this case, it seems that the animation is redundant hahaha,
add it in the head section
Of course, you can also introduce animate.css in the head and introduce wow.js at the end

<head>
    <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
    <script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
</head>

The remote reference is used here. Of course, you can also directly download the reference:
wow.js official website wow.js
animate.css official website animate.css
In this case, it cannot be used directly, because wow.js also
needs of animate Add the js code to initialize wow.js after .css and wow.js references

<script>new WOW().init();</script>

In this way, the initialization is completed. When you need to add animation, you only need to add the wow style and the animation style in animate.css to the element that needs to be animated.

Add animation effects

<div class="wow bounceInUp" id="div1"></div>

This is the simplest reference method, so that the div1 element in the above code will bounce in, and the trigger timing is when the page window is about to be observed, that is, the animation effect is not at the beginning. will behave (offscreen animations don't make sense then). On the PC, the animation will be played only when the mouse wheel scrolls to this element, and on the mobile phone, the animation will only be played when the element is pulled.
If you only add a wow style, then the element is invisible until it is scrolled to, and only appears when the user sees it.
Of course, it is meaningless to simply have an animation at the beginning. Sometimes we need to control the time when the animation appears, or play the animation in a loop. At this time, we can add the attributes that can be parsed by wow.js to the element.

Advanced properties

data-wow-duration : the duration of the animation, the longer the time, the slower the animation. For example, 1s
data-wow-delay : The longer the delay time, the later the animation will appear. For example, 1s
data-wow-offset : The distance at which the animation starts A larger setting means the animation is harder to animate. For example, 10 means that the element content will only animate when 10 is in the browser. The default value is 0
data-wow-iteration : When the number of animation repetitions is set to infinite, it will continue to repeat continuously. You can also set an integer

Example 1

<div class="wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s"></div>

The above element animation will delay 0.5 seconds and slowly grow from the center point into

Example 2

<div class="wow pulse" data-wow-duration="1s" data-wow-iteration="infinite"></div>

The element in the example above will keep beating like a heart beats every second

Many different effects can be achieved by changing these properties. The
effect name can be viewed in animate.css
to select the effect you like.

custom settings

Custom setting properties when initializing wow:
boxClass: when the element does not have any duplicates with the browser, the default value of the element set to hide is wow;
animateClass: the animation style when it is running;
offset: when the element is The animation will appear when the browser window intersects. The larger the value, the harder it will appear. The default value is 0, that is, any intersection will appear.
mobile: Set for the mobile phone, because the core of the display device of the mobile device is not as good as that of the computer. If it is set to false, the animation effect will not be displayed on the mobile phone. The default is true;
live: the default is true. Continuously check whether there is an element for wow animation style in the page. If it is set to false, then the wow style added by js after the page is loaded will be There will be no animation effect. The default value is true;

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

Common animation effects

fadeIn: fade in;
bounceIn: bounce in; zoomIn: enter
from small to large;
rotateIn: rotate in;
slideInUp: slide up to enter;
. . . For more, go to animate.css to see it

animate.css and js can also make very complex effects, such as the effect of stacking two effects together, but if you are lazy to use wow.js, you can use nested effects to achieve two effects at the same time

[My own finishing] Trigger animation effects when the page scrolls wow.js + Animate.css