スクロールに応じて動くアニメーションをつくる方法

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは!
 
今日のネタは…「スクロールに応じて動作するアニメーション」です。
 
そういったサイトも増え(むしろもう減った?)
目にする機会も増えたかと思います。
 
基本はこんなパラパラアニメを用意し
 

 
スクロールによって画像の位置を変更する or 位置によって表示する画像を差し替える
を実施するだけです。
 
パラパラアニメを用意するのが若干手間ですが
それさえクリアできればけっこう簡単です。
 
…前置きはこれぐらいでデモとコード
 

DEMO

コード


<script type="text/javascript">
$(document).ready(function(){

//#MovieContents内スクロール初期化
$(‘#MovieContents’).scrollTop(0,0);

//#MovieContentsをスクロールでfunction実行
$(‘#MovieContents’).scroll(function(){

//#MovieContentsからのスクロール距離
var MH = -400 * Math.floor(($(this).scrollTop() / 40));

if( MH >= -292800){
$(‘#MVimg’).css({"margin-top": MH});
}else if( MH <= -292800 && MH >= -300000){
$(‘#MVimg’).css({"margin-top": "-292800px"});
}else if( MH <= -300000 ){

//全て再生後に初期化。ループに入る
$(‘#MovieContents’).scrollTop(0,0);
}
});
});
</script>


 
以上になります。