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

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

まずはサンプルから

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

このパターンの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(リンク先)の値を実行
————————————————————-
といった感じで動きをつけています。

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

サンプルはこちら:パターン2

こっちの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用サイト構築なんかでは効果的な演出が組み込めるかな、と思います。

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

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

Related Posts

Comments (7)

  • E2 DESIGNERS BLOG:HTML,CSS,JavaScript,jQuery,FlashなどWebデザインに関するネタ紹介/株式会社E2 | 2010.10.31 1:33

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

    Webサイト上でリンクをクリックした際、通常のページ遷移では画面がパッと切り替わるだけ。 何か味気ない感じもするので、画面が切り替わる際にフェードアウト & フェードインしたり…

  • jQueryでページ遷移時にスライドアニメーションをつけてみる【改訂版】 | BlackFlag | 2011.09.21 10:56

    [...] かなり前に「jQueryでページ遷移時にアニメーション効果をつけてみる。」と題して、 jQueryでページ遷移時に画面をスライドさせるアニメーション効果をつけるSCRIPTを紹介しましたが、 [...]

  • moto | 2014.02.07 21:42

    はじめまして。こんなアニメーション効果を探していました!
    こちらを是非利用したいのですが、ライセンスはどのようになっておりますでしょうか?
    商用サイトでの利用を考えております。

    また、利用しても良い場合、著作権表示などは必要でしょうか?
    何卒よろしくお願い致します。

  • BlackFlag | 2014.02.09 1:42

    >motoさん
    コメントありがとうございます。
    このアニメーションスクリプトをご活用いただいているようで
    嬉しく思っております。

    当ブログのライセンスに関しては
    個人・商用問わずフリーとなっておりますが
    詳細については
    » ライセンスに関して
    こちらに記載しておりますのでご参照ください。

    よろしくお願いします。

  • moto | 2014.02.10 16:15

    どうもありがとうございます。
    問題なく実装できましたが、同ページ内にcolorboxの効果を使用したいのですが、
    画像のサムネイルをクリックすると画面遷移されてしまいうまく動作できません。

    なにか解決方法はございますでしょうか?

    よろしくお願い致します。

  • BlackFlag | 2014.02.11 11:46

    >motoさん
    ご確認ありがとうございます。

    当記事の一つ目のサンプルスクリプトは
    ページ内の全てのリンク<a>タグに効果が実装されるようになっていますが
    二つ目のスクリプトは任意のクラスの付いたリンク<a>タグのみに
    動作を実装させる形になっておりますので
    そちらをご参考にしていただき
    colorboxのリンク<a>タグと遷移アニメーション付きリンク<a>タグとを
    分けて構成することで可能になるかと思います。

    お試しください。

    よろしくお願いします。

  • moto | 2014.02.11 20:52

    早々にご返事をいただきまして、ありがとうございます!
    無事解決できました!

    おかげ様でステキなサイトができそうです。
    どうもありがとうございました!







コメント内容

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

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

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