【特效】頁面滾動到相應位置運行css3動畫

請到個人我的博客網站上瀏覽此文章，歡迎評論和建議。

文章連接：http://www.xiaoxianworld.com/archives/87

如今css3動畫很常見了，實際項目中常常應用，特別是那種長長的信息展現類的頁面。因而產生一個問題，須要控制動畫的運行，就像給其加一個開關，何時動，何時停，想爲所欲爲的控制。天然會用到animation-play-state屬性，其兩個屬性值paused：規定動畫已暫停，和running：規定動畫正在播放，正好能知足要求。

對於那種長長的頁面，給一些文字或圖片添加了動畫後，想實現其隨着頁面滾動而動畫的效果，由於若是動畫一開始就運行，那麼處在不是第一屏的內容，就算其動畫運行了，咱們也看不到。因此，就要實現，當內容從頁面底端滾動出來，也就是出如今視野範圍內時，動畫才運行。這就免不了用到js，來獲取滾動條滾動的高度，和動畫所在層的位置。 

寫了一個簡單的demo來具體說明吧，只寫了一個文字從右向左移動的動畫，當其滾動出現時，才運行：

html:

<div class="con">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>

<ul class="list">
<li>
<p>第1屏動畫進入視線</p>
</li>
<li>
<p>第2屏動畫進入視線</p>
</li>
<li>
<p>第3屏動畫進入視線</p>
</li>
</ul>

css: 

.con{ height:1200px;}
.list{ list-style:none; padding:0; margin:0; border-top:2px solid blue;}
.list li{ height:500px; border-bottom:1px solid green;}
.list li p{ opacity:0; animation:move 1s forwards; animation-play-state:paused;}
.list .move p{ animation-play-state:running;}
@keyframes move{
from{ opacity:0; margin-left:500px;}
to{ opacity:1; margin-left:0;}
}

js: 

$(document).ready(function(){
var a,b,c;
a=$(window).height();
$(window).scroll(function(){
var b=$(this).scrollTop();
$(".list li").each(function(){
c=$(this).offset().top;
if(a+b>c){
$(this).addClass("move");
}
else{
$(this).removeClass("move");
}
});
});

});

源碼下載：http://pan.baidu.com/s/1qY8nWPA