JS捲軸觸發後按時間依次顯示的動畫效果-教學撰寫:徐嘉裕Neil hsu

 寫了一個JS捲軸觸發後按時間依次顯示的動畫效果的範例，效果如下影片

就是當捲軸拉到觸發的ID時物件按照時間依序觸發動畫，這通常用在視差設計裡面，方法如下

//HTML結構

<div class="row">
<div id='addressbox14' class="each" >
<div class="col-md-6 addressbox01 " >
略.....
</div></div>

<div id='addressbox15' class="each" >
<div class="col-md-6 addressbox02 " >
略.....
</div></div>

<div id='addressbox16' class="each" >
<div class="col-md-6 addressbox01 " >
略.....
</div></div>

<div id='addressbox17' class="each" >
<div class="col-md-6 addressbox02 " >
略.....
</div></div>
</div>

//JS結構

$(window).scroll(function() {
var $scrollTopa =$(this).scrollTop(); //當前座標位置
var $scrollTopb=$scrollTopa+850; //觸發位置

$(".each").each(function(index) {

 
var $index=index*270; //setTimeout時間each迴圈取index乘270數值

var $addressbox='#'+$(this).attr("id"); //物件ID
var $offsetvar=$($addressbox).offset(); //物件位置

if($scrollTopb > $offsetvar.top){
setTimeout( function(){
$(''+$addressbox+' .addressbox01').css({"animation-name":"addressbox01","left":"0px","opacity":"1"});
$(''+$addressbox+' .addressbox02').css({"animation-name":"addressbox02","right":"0px","opacity":"1"});
},$index);
}
});
});

備註說明：以each產生的0.1.2.3數值乘上270產生時間，作為setTimeout的延遲時間

//CSS結構

.addressbox01{
position: relative;

text-align: right;
animation-duration: 2s;
opacity: 0;
left: -100px;
}

@keyframes addressbox01{
from {
left: -100px;
opacity: 0;
}

to {
left: 0px;
opacity: 1;
}
}

.addressbox02{
position: relative;
animation-duration: 2s;
opacity: 0;
right: -100px;
}


@keyframes addressbox02{
from {
right: -100px;
opacity: 0;
}

to {
right: 0px;
opacity: 1;
}
}

這樣就可以了，有需要的朋友參考看看!

工作心的撰寫：徐嘉裕 Neil hsu