Recently, I am doing an official website type scrolling loading animation, using the waypoint listening event plugin and the animate animation style. The combination of the two perfectly realizes the scrolling loading animation, but I did not do the scrolling undo animation, and I will leave it for future research.
First of all, let's introduce the jquery.waypoint.js tool, which is a real-time monitoring page scroll event, which relies on jquery, and adds the animation style of animate through jquery to achieve the animation effect
Note: animate animation is realized through css3, and the lower version of the browser is emmm....
a simple millet
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="frame/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div class="container" style="padding-top: 1200px;padding-bottom: 300px"> <h1 class="animate-box text-center">Title</h1> </div> </body> <script type="text/javascript" src="frame/jQuery-2.1.4.min.js"></script> <script type="text/javascript" src="frame/jquery.waypoints.min.js"></script> <script> $('.animate-box').waypoint( function( direction ) { $(this.element).addClass("wobble animated") } , { offset: '85%' } ); </script> </html>
The waypoint method is to monitor the event of the element, the offset parameter is the position of the element within the visible range of the page, wobble is the implementation method of animation, animated is the execution method of animation, both are indispensable
to a simple illustration.
Come to a more complicated millet
<style> .animate-box { opacity: 0; } </style> <div class="row aboutus-list"> <div class="col-lg-4 col-xs-4 fadeInUp-tip animate-box itme-adimate" data-animate-effect="fadeInUp"> <span class="aboutus-service sp-img"></span> <h3>信息化xx</h3> <div class="fade-text"> Informatization realizes the process of xxx management </div> </div> <div class="col-lg-4 col-xs-4 fadeInUp-tip animate-box itme-adimate" data-animate-effect="fadeInUp"> <span class="aboutus-resources sp-img"></span> <h3>智能化xx</h3> <div class="fade-text"> Realize the quantification and supervision of xx work </div> </div> <div class="col-lg-4 col-xs-4 fadeInUp-tip animate-box itme-adimate"data-animate-effect="fadeInUp" > <span class="aboutus-technology sp-img"></span> <h3>智慧化xxx</h3> <div class="fade-text"> Combining information-based operation and intelligent supervision to achieve machine-to-machine structure unified realization </div> </div> </div> < div class ="row aboutus-list aboutus-list-3" > < div class ="col-lg-3 col-xs-3 col-funds animate-box itme-adimate" data-animate-effect ="fadeInUp" > < span class ="aboutus-service sp-img" ></ span > < p > intelligent xx </ p > < div class ="text-p" > Informatization realizes the operation process of multiple links in xxx Management </ div > </ div > < div class ="col-lg-3 col-xs-3 col-funds animate-box itme-adimate" data-animate-effect ="fadeInUp" > < span class =" aboutus-resources sp-img" ></ span > < p > Intelligent xxx </ p > < div class ="text-p" > Informatization realizes the management of people, things and things inside the organization And the operation process of multiple links in the xxx process Management </ div > </ div > < div class ="col-lg-3 col-xs-3 col-funds animate-box itme-adimate" data-animate-effect ="fadeInUp" > < span class =" aboutus-technology sp-img" ></ span > < p > Health xxx </ p > < div class ="text-p" > Informatization realizes the management of people, things and things inside the organization And the operation process of multiple links in the xxx process Management </ div > </ div > < div class ="col-lg-3 col-xs-3 col-funds animate-box itme-adimate" data-animate-effect ="fadeInUp" > < span class =" aboutus-cloudbeacon sp-img" ></ span > < p > xxxx </ p > < div class ="text-p" > Informatization realizes the management of people, things and things inside the organization And the operation process of multiple links in the xxx process Management </ div > </ div > </ div >
var i = 0 ; $('.animate-box').waypoint( function( direction ) { if( direction === 'down' && !$(this.element).hasClass('animated-fast') ) { i++; $(this.element).addClass('item-animate'); setTimeout(function(){ $('body .animate-box.item-animate').each(function(k){ var el = $(this); setTimeout( function () { var effect = el.data('animate-effect'); el.addClass(effect + ' animated' );//Read the animation name set in the custom attribute value and add it to the element class el.removeClass('item-animate'); }, k * 200, 'easeInOutExpo' );//Add transition animation time to each element according to the order }); }, 100); } } , { offset: '85%' } );
This chestnut can monitor 7 box elements and add different animations by reading the value of the custom attribute data-animate-effect through jquery, but because the animation positions are different,
It will determine whether the current scrolling direction is correct and whether to repeat the execution according to the internal parameters of the direction and the animated-fast class.
, and at the same time add the cumulative execution time according to the element order under the work of the timer to achieve a gradual transition effect
Special Note: Because the transparency transitions from 0 to 1 in the fadeInUp animation, the transparency of the element must be set to 0 at the beginning, otherwise it will have no effect
Previous transition animation effect
