JS realizes the animation effect of text and pictures in the visual area

utilize wow.min.js, animate.css  Displayed when the user scrolls the page CSS Animation effect .
Official website ：Animate Chinese net – Animate install 、Animate Use 、Animate download

Download address ：http://www.bootcdn.cn/wow/
Case presentation ：animate.css The demo _dowebok

1、 Join in animate.css

<link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet"> or

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">

2、 Join in wow.js .（ No need to quote jQuery）

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>
Be careful new WOW().init(); Medium WOW Use capital letters , Otherwise it won't work .

3、 element class

<div class="wow animated tada">tada</div>

4、wow.js Used querySelectorAll Method ,IE The lower version will report an error . For better compatibility , It's better to add a browser and version judgment .

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>

<script>

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){

    new WOW().init();

};
</script>

5、 You can join data-wow-duration（ Animation duration ） and data-wow-delay（ Animation delay time ） attribute , Such as .（ stay css below js Write the elements that need animation above （ Must be set to block or inline block ！ Must be set to block or inline block ！ Must be set to block or inline block ！）, And add class Class name .)

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

 Before the class name wow Every element with animation has to be added ,slideInLeft It's about animation styles . hinder data-wow-duration（ Animation duration ）、data-wow-delay（ Animation delay time ）、data-wow-offset（ How many pixels from the bottom of the element after its position is exposed ） and data-wow-iteration（ Animation execution times ） These four attributes are optional .

 Enclosed animated Animation of class attribute 

fade: {
        title: ' Fade in and out ',
        fadeIn: ' Fade in ',
        fadeInDown: ' Fade down ',
        fadeInDownBig: ' Fade down quickly ',
        fadeInLeft: ' Fade in to the right ',
        fadeInLeftBig: ' Fade in quickly to the right ',
        fadeInRight: ' Fade left ',
        fadeInRightBig: ' Fade quickly to the left ',
        fadeInUp: ' Fade in ',
        fadeInUpBig: ' To fade in quickly ',
        fadeOut: ' Fade out ',
        fadeOutDown: ' Fade down ',
        fadeOutDownBig: ' Fade down quickly ',
        fadeOutLeft: ' Fade to the left ',
        fadeOutLeftBig: ' Fade out quickly to the left ',
        adeOutRight: ' Fade to the right ',
        fadeOutRightBig: ' Fade quickly to the right ',
        fadeOutUp: ' Fade up ',
        fadeOutUpBig: ' Quickly fade up '
      },
      bounce: {
        title: ' Bounce class ',
        bounceIn: ' Bounce into ',
        bounceInDown: ' To spring down into ',
        bounceInLeft: ' Bounce right into ',
        bounceInRight: ' Bounce left into ',
        bounceInUp: ' Jump up into ',
        bounceOut: ' Bounce out ',
        bounceOutDown: ' Bounce down to exit ',
        bounceOutLeft: ' Bounce left to exit ',
        bounceOutRight: ' Bounce right to exit ',
        bounceOutUp: ' Bounce up and out '
      },
      zoom: {
        title: ' Zoom class ',
        zoomIn: ' Zoom in ',
        zoomInDown: ' Zoom down into ',
        zoomInLeft: ' Zoom right into ',
        zoomInRight: ' Zoom left into ',
        zoomInUp: ' Zoom up into ',
        zoomOut: ' Zoom out ',
        zoomOutDown: ' Zoom down to exit ',
        zoomOutLeft: ' Zoom left to exit ',
        zoomOutRight: ' Zoom right out ',
        zoomOutUp: ' Zoom up and out '
      },
      rotate: {
        title: ' Rotation class ',
        rotateIn: ' Turn clockwise to enter ',
        rotateInDownLeft: ' Screw in... From the left ',
        rotateInDownRight: ' Screw in... From the right ',
        rotateInUpLeft: ' Screw in... From the left ',
        rotateInUpRight: ' Screw in... From the right ',
        rotateOut: ' Turn clockwise to exit ',
        rotateOutDownLeft: ' Spin out to the left ',
        rotateOutDownRight: ' Spin out to the right ',
        rotateOutUpLeft: ' Turn left and up ',
        rotateOutUpRight: ' Spin out to the right '
      },
      flip: {
        title: ' Flip class ',
        flipInX: ' To turn horizontally into ',
        flipInY: ' Flip vertically into ',
        flipOutX: ' Flip horizontally to exit ',
        flipOutY: ' Flip vertically to exit '
      },
      strong: {
        title: ' Emphasis class ',
        bounce: ' bounce ',
        flash: ' flashing ',
        pulse: ' pulse ',
        rubberBand: ' elastic ',
        shake: ' Weak shaking left and right ',
        swing: ' Swing up and down ',
        tada: ' Scale swing ',
        wobble: ' Strong shaking left and right ',
        jello: ' Stretching jitter '
}

 example ： The following is to achieve image lazy and animation effects 

	
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="js/test/animate.min.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/test//wow.min.js"></script>
	<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){

    new WOW().init();

};

</script>
  <title> Lazy loading and animation effects </title>
  
</head>
<body>
	<div style="height: 100rem"></div>

	<div class="img-wrap">
    <img  class="lazyload wow bounceInDown"  data-wow-duration="1s" data-src="imgsrc"    /><br>
	
<img  class="lazyload wow fadeInUpBig swing" data-wow-offset="50" data-src="imgsrc2"    />
      
  </div>    
    

	
</body>
</html>

Before loading

  After loading