h5頁面動畫，在推廣運營中應用的相當廣泛。越是酷炫的動畫，越能吸引使用者。動畫當然算是比較重要的乙個環節，除此之外不得不提到的就是－動畫滾動互動效果。
一、每個section怎樣單獨執行動畫？
首先，引入動畫庫，這裡我們使用animate.css（傳送門）
1
請注意：如果你只用了少量動畫效果，請直接拷貝具體動畫**，而不再引入整個動畫庫。rel="stylesheet"
href="css/animate.css">
其次，像往常一樣編寫你的html**：
1234567
891011
1213
1415
id="wan_banner">
class="warp">
id="left"
class="animate">
class="pos bounce_in_down">
革命性通訊技術i>
超低功耗感測器網路基站i>
div>
div>
id="right"
class="animate">
class="bounce_in_right"
src="../image/product2.png"
width="200"
height="406"/>
div>
div>
section>
我們來簡單說一下這裡的處理細節：
1.我們為#left，#right容器新增了animate類；
2.為animate子容器分別新增了bounce_in_down，bounce_in_right類；
接下來，我們來處理一下動畫細節：
1234567
891011
1213
1415
1617
1819
2021
2223
2425
2627
/*方式一*/上面列舉了三種方式，方式一主要是先暫停動畫，等待執行時機。方式二，三先隱藏元素，啟用後，顯示元素。.animate
.play
.animate
/*方式二*/
.animate
.play
.animate
/*方式三*/
.animate
.play
.animate
/*動畫類，此處舉乙個栗子，請確保bounceindown動畫已經引入*/
.play
.bounce_in_down
個人比較推薦第一種和第二種方式，第三種方式元素容器會變化，某種情況下會引起不必要的問題。
這裡著重說明一下play類，我們暫且稱它為動畫觸發類。思路就是，需要執行動畫的元素新增animate類，先做暫停處理；當需要啟用該元素動畫的時候，為其父元素新增play類，從而觸發動畫執行。
很好，動畫也可以觸發了，那麼最重要的執行時機怎麼確定？下面我來介紹一下，滾動觸發動畫執行的方式。
二、如何檢測頁面滾動到了哪個section容器？
場景：頁面分為多個section，我要實現，頁面滾動到具體哪個section，為其新增play類。
方案一：
12345
$(window).scroll(function (event) );檢測滾動的高度，然後取頁面每個section位置，放入陣列，如果當前滾動高度在section某個區間，那麼就為其新增play類；
可是感覺比較麻煩，看看有沒有其他好的辦法。繼續尋找方案二。。。。
方案二：
借助外掛程式，實現監聽滾動傳送門
還是上面的html結構：
1234567
891011
1213
1415
data-scroll-watch
id="wan_banner">
class="warp">
id="left"
class="animate">
class="pos bounce_in_down">
革命性通訊技術i>
超低功耗感測器網路基站i>
div>
div>
id="right"
class="animate">
class="bounce_in_right"
src="../image/product2.png"
width="200"
height="406"/>
div>
div>
section>
section部分新增了data-scroll-watch，這就告訴了scrollwatch，此部分需要做滾動監聽。
接下來，你需要初始化scrollwatch外掛程式，並做一些簡單的配置調整。
1234567
89
var sw = new scrollwatch(哈哈，大家可能看出來了，方案二就是偷懶模式?。我們借助scrollwatch來完成，詳細資訊請檢視api。});
三、繼續公升級：section進入視口，執行動畫；section滾出視口，反向執行動畫？
互動師又提出了乙個需求：
當滾動到該區域時，動畫執行；當該區域離開檢視區域時，動畫反向執行。我們接受挑戰，看看如何實現。
第一反應當然是看看有沒有現成的外掛程式，這樣可以省去重複造輪子的時間成本。很幸運，我看到了這篇文章jquery smoove-華麗的css3滾動效果。
嗯，jquery smoove是個不錯的方案。
注意：jquery smoove為另外一種實現方式，與之前說的上文沒有任何關係！
首先：引入類庫，請先引入jquery檔案。
123
"">script>我們對上面的html結構做一下簡單的調整："0.2.6/jquery.smoove.min.js">script>
1234567
891011
1213
14
id="wan_banner">
class="warp">
id="left"
class="my_animate"
data-move-x="-100px">
class="pos">
革命性通訊技術i>
超低功耗感測器網路基站i>
div>
div>
id="right"
class="my_animate"
data-move-x="100px">
src="../image/product2.png"
width="200"
height="406"/>
div>
div>
section>
jquery smoove幫我們做好了動畫，我們只需要為其新增特定屬性。
請注意：#left和#right的容器內部已經變成了my_animate類，同時新增了data-move-x=」-100px」和data-move-x=」100px」語法。
用外掛程式，肯定需要做一些初始化工作：
12345
$(document).ready(function());當該元素滾動到距離視口底部45%距離時，觸發動畫。更多的動畫效果，請檢視jquery-smoove文件位址。})
到這裡，整個處理方式應該很明晰了吧，希望能夠幫到你。
jquery如何判斷滾動條滾到頁面底部並執行事件
首先理解三個dom元素，分別是 clientheight offsetheight scrolltop。clientheight 這個元素的高度，占用整個空間的高度，所以，如果乙個div有滾動條，那個這個高度則是不包括滾動條沒顯示出來的下面部分的內容。而只是單純的div的高度。offsetheigh...
jquery如何判斷滾動條滾到頁面底部並執行事件
首先理解三個dom元素，分別是 clientheight offsetheight scrolltop。clientheight 這個元素的高度，占用整個空間的高度，所以，如果乙個div有滾動條，那個這個高度則是不包括滾動條沒顯示出來的下面部分的內容。而只是單純的div的高度。offsetheigh...
jquery如何判斷滾動條滾到頁面底部並執行事件
首先理解三個dom元素，分別是 clientheight offsetheight scrolltop。clientheight 這個元素的高度，占用整個空間的高度，所以，如果乙個div有滾動條，那個這個高度則是不包括滾動條沒顯示出來的下面部分的內容。而只是單純的div的高度。offsetheigh...