Requirements: scroll html to the visual area to display animation. Use it in combination with animate.css wow.js

First put the cdn link

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">  

<!-- Scrolling down the page has an effect -->
<script type="text/javascript" src="https://cdn.dowebok.com/131/js/wow.min.js"></script> 
<!-- Scrolling up and down the page has an effect -->
<script type="text/javascript" src="http://www.jeendo.com/script/wow/wow.min2.js"></script> 
   

Add element to page

Add 'wow' to the element you want to add animation (required)
Add 'animatecss' (the Class of animation) to the element you want to add animation. You can find the appropriate animation on this website http://daneden.github.io/animate.css/ Write it yourself)
For example:

<div class="wow bounce">title</div> //bounce is the name of the animation in animate.css

Note: if vue, initialization should be performed in the mounted life cycle

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

You can also customize wow.js

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

boxClass: the class name of the hidden box displayed when the user scrolls.

animateClass: the name of the class that triggers CSS animation (animate.css Kummer thinks "animated")

Offset: defines the distance between the bottom of the browser viewport and the top of the hidden box.
When the user scrolls and reaches this distance, the hidden box is displayed.

Mobile: turn WOW.js on / off on the mobile device.

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

Other properties

Write the element to be animated (it must be set to block or inline block) below css and above js, and add the class name

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="2s" data-wow-offset="10"  
  data-wow-iteration="10"></div>  

The following four attributes are optional: Data wow duration, data wow delay, data wow offset and data wow iteration

Repeated scrolling of the page has an effect

Note: we must first introduce wow.min.js, and then add this code to scroll repeatedly, which has an effect

<script type="text/javascript" src="http://www.jeendo.com/script/wow/wow.min2.js"></script> 

Some incompatibilities in IE browser need to be judged

Old browsers such as IE6 and IE7 do not support CSS3 animation, so it has no effect; wow.js also uses the querySelectorAll method, and the lower version of IE will report an error. In order to achieve better compatibility, it is best to add a browser and version judgment

<script type="text/javascript">
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new WOW().init();
    };
</script>

Some websites use the full screen scrolling fullpage plug-in combined with wow

However, when fullpage.js is used, wow.js is invalid and no action is taken

The problem is that the scroll bar is hidden in the fullpage. Open the scroll bar and set the scrollBar to true. The code is as follows

$('#fullpage').fullpage({
　scrollBar:true；
});

Finally, use css to hide the scroll bar and add html to overflow idden. The code is as follows

　html{
　　　　overflow:hidden;
　　}

This article refers to several articles: original links:
http://www.manongjc.com/detail/16-yxlccuogywmdsqk.html https://www.cnblogs.com/xgxm13/p/7667296.html
https://www.freesion.com/article/28891028389/
https://www.cnblogs.com/xiaomifeng/p/12700026.html