最近在做一個官網類型滾動加載動畫，使用到waypoint監聽事件插件和animate動畫樣式，兩者結合完美實現向下滾動加載動畫，但是沒有做向上滾動撤消動畫，留待以后有空研究
首先來介紹下jquery.waypoint.js工具，這是一個實時監聽頁面滾動事件，它依賴於jquery，通過jquery添加animate的動畫樣式來實現動畫效果
注意：animate動畫是通過css3來現實，低版本的瀏覽器就emmm....
來個簡單的粟子
<!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>
waypoint方法是監聽該元素的事件，offset參數是該元素在頁面可視范圍內的位置，wobble 是動畫的實現方法，animated是動畫的執行方法，二者缺一不可
來張簡單的說明圖
來個更復雜點的粟子
<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"> 信息化實現對xxx流程 化管理 </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"> 實現對xx工作量化及監督 </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"> 結合信息化運營和智能化監管，實現對機 構統一實現 </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>智能xx</p> <div class="text-p">信息化實現對xxx中多個環節運營流程 化管理</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>智能xxx</p> <div class="text-p">信息化實現對機構內部人、事、物的管理 及xxx過程中多個環節運營流程 化管理</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>健康xxx</p> <div class="text-p">信息化實現對機構內部人、事、物的管理 及xxx過程中多個環節運營流程 化管理</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">信息化實現對機構內部人、事、物的管理 及xxx過程中多個環節運營流程 化管理</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');//讀取自定義屬性值中設定的動畫名稱添加到元素類中 el.removeClass('item-animate'); }, k * 200, 'easeInOutExpo' );//根據順序分別為每個元素添加過渡動畫時間 }); }, 100); } } , { offset: '85%' } );
這個粟子可以監聽7個盒子元素，通過jquery讀取自定義屬性data-animate-effect的值來添加不同的動畫，但是因為動畫位置不同，
會根據direction內部參數和animated-fast類來決定當前滾動方向是否正確和是否重復執行
，同時在定時器的工作下根據元素順序添加累加執行時間來實現逐步過渡效果
特別注意：因在fadeInUp動畫中是由透明度0過渡到1，所以初始時元素的透明度必須設置成0，否則沒有效果
上一下過渡動畫效果
