jQueryでページ遷移時にアニメーション効果をつけてみる。

2010/08/17 TAGS :jQuery, スライド, ページ遷移

Webサイト上でリンクをクリックした際、通常のページ遷移では画面がパッと切り替わるだけ。
何か味気ない感じもするので、画面が切り替わる際にフェードアウト＆フェードインしたり、
スライドアウト＆スライドインなどのアニメーション効果をつければ、
また違った演出が加えられるのではないかと考え、試してみた実験サンプルのご紹介。

サンプルではトップページは“フェードイン”、
「次へ」といったリンクをクリックしてページ遷移をした際に
ページ全体がスライドアウト／インして遷移するパターンになります。

まずはサンプルから

サンプルはこちら：パターン１※「次へ」をクリックしていくとページ全体がスライドして遷移します。

このパターンのSCRIPTは以下のような感じで実装。（もちろん別途、要jQueryファイル）

◆SCRIPT
$(function(){
	$('#container:not(body#index #container)').css({display:'block',marginLeft:$(window).width(),opacity:'0'});
	$('#container:not(body#index #container)').animate({marginLeft:'0px',opacity:'1'},500);

	$('body#index #container').css({display:'block',opacity:'0'});
	$('body#index #container').animate({opacity:'1'},500);

	$('a').click(function(){
		var pass = $(this).attr("href");
		$('#container').animate({marginLeft:'-=' + $(window).width() + 'px',opacity:'0'},500,function(){
			location.href = pass;
		});
	    return false;
	});
});

HTMLソース側は、トップページのみフェードインにする為に、
トップページで使用するHTMLソースのbodyにはid=”index”を付加している構成になり、
全てのページにおいて、ソース全体を任意のブロック要素で囲います。（サンプルでは<div id=”container”>としています。）

◆HTML【トップページ】
<body id="index">

◆HTML【全ページ】
<body>
<div id="container">
～　ページ上に表示する要素　～
</div><!--/container-->
</body>

SCRIPTの構成的には、
————————————————————-
・ページロード時に
　トップページ以外では、<div id=”container”>に対して、
　margin-leftに表示しているブラウザ幅の値を入れ、アニメーションで「0」に、

　トップページではページロート共に<div id=”container”>に対して、
　opacity（透明度）「0」の値を入れ、アニメーションで「1」に

・リンクをクリックされた際に
　href（リンク先）の値を変数に入れ、<div id=”container”>に対して、
　margin-leftに「-」の値でブラウザ幅分、アニメーションで動かし
　アニメーション終了後変数に入れたhref（リンク先）の値を実行
————————————————————-
といった感じで動きをつけています。

これらを踏まえ、ちょっとアニメーションの動きを変えてみたパターン

サンプルはこちら：パターン２

こっちのSCRIPTは以下のような感じに。

◆SCRIPT
$(function(){
	$('#container:not(body#index #container)').css({display:'none'});
	$('#container:not(body#index #container)').slideDown('normal');

	$('body#index #container').css({display:'block',opacity:'0'});
	$('body#index #container').animate({opacity:'1'},500);

	$('a.prev').click(function(){
		var pass = $(this).attr("href");
		$('#container').animate({marginLeft:$(window).width() + 'px',opacity:'0'},500,function(){
			location.href = pass;
		});
	    return false;
	});

	$('a.next').click(function(){
		var pass = $(this).attr("href");
		$('#container').animate({marginLeft:'-=' + $(window).width() + 'px',opacity:'0'},500,function(){
			location.href = pass;
		});
	    return false;
	});
});

トップページ以外のページロード時の動きをスライドダウンに変えてあります。
リンクも「次へ」と「前へ」と分けて、それぞれ逆のスライドパターンになっています。

あまり動きをオーバーにすると逆にうっとおしくなる可能性もあるのでほどほどに。

通常のサイトではこういった動きについてはあまり使用する頻度は少ないかもしれませんが、
ギャラリー的コンテンツやiPhone用サイト構築なんかでは効果的な演出が組み込めるかな、と思います。

ページ遷移時にアニメーション効果をつけたい場合に是非。。。