パララックスサイト制作の際などで活用できる
ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る
jQueryプラグインがいろいろ使い道がありそうだったので
自分用のメモ書きとして紹介してみます。
jquery-peekaboo
使い方はとても簡単で
ページをスクロールしてアクションを実行させるポイントになる箇所に対して
下記のような記述で処理を実行させます。
◆SCRIPT
$(function(){
$('.point').on('appear',function(){
$(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000);
});
});
この記述の場合は、ページをスクロールして
「.point」とクラス付けされた要素の位置に辿り着いたら
その要素に対してフェードイン処理を実行させます。
フェードのみならず動きを大きくつけたアニメーション処理を実行させることで
パララックス的な動きをつけることも可能かと思います。
jQuery Waypoints
こちらのプラグインも同様に
下記の様にして特定のスクロール位置で処理を実行させることができます。
◆SCRIPT
$(function(){
$('.point').waypoint(function(event,direction){
$(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000);
});
});
一つ目のサンプルと同じように、ページをスクロールして
「.point」とクラス付けされた要素の位置に辿り着いたら
その要素に対してフェードイン処理を実行させます。
この「jQuery Waypoints」では上からのスクロールと
下からのスクロールで別々の処理を加えることもできるようです。
◆SCRIPT
$(function(){
$('.point').waypoint(function(event,direction){
if(direction === 'down'){
$(this).animate({left:'100px'},1000);
} else{
$(this).animate({left:'-100px'},1000);
}
});
});
上からスクロール（ダウン）された時には「left:’100px’」をアニメーションさせ、
下からスクロール（アップ）された時には「left:’-100px’」をアニメーションさせます。
「jQuery Waypoints」プラグインは他にも
無限スクロールやスクロール位置固定など
様々なスクロールによる制御ができるプラグインになっています。
以上が特定のスクロール位置でアニメーション等の
処理を実行させることができるjQueryプラグイン2種でした。
これらの処理はパララックスサイトだけでなく
通常のサイトでもおもしろい演出を組み込むことができるかと思います。
Webページ内の特定の位置でアニメーション処理を実行させたい際に是非。。。