パララックスサイト制作の際などで活用できる
ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る
jQueryプラグインがいろいろ使い道がありそうだったので
自分用のメモ書きとして紹介してみます。

jquery-peekaboo


uniba/jquery-peekaboo・GitHub

使い方はとても簡単で
ページをスクロールしてアクションを実行させるポイントになる箇所に対して
下記のような記述で処理を実行させます。

◆SCRIPT
$(function(){
	$('.point').on('appear',function(){
		$(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000);
	});
});

この記述の場合は、ページをスクロールして
「.point」とクラス付けされた要素の位置に辿り着いたら
その要素に対してフェードイン処理を実行させます。

フェードのみならず動きを大きくつけたアニメーション処理を実行させることで
パララックス的な動きをつけることも可能かと思います。

jQuery Waypoints


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ページ内の特定の位置でアニメーション処理を実行させたい際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR