jQueryを使用してサイトアクセス時にページ内容をフェードインさせる方法と、
リンクをクリックした時にフェードアウトしてからページ遷移する方法をメモします。
フェードイン、フェードアウトするのに下記のメソッドを使用しています。
fadeIn([speed], [callback])
指定した要素をフェードインして表示します。
fadeOut([speed], [callback])
指定した要素をフェードアウトして非表示にします。
※[callback]は処理終了時に実行する内容を記述します。
■ フェードイン、フェードアウトする方法
「wrapper」の内容がフェードインして表示されます。
また、リンクをクリックするとフェードアウトしてページ遷移します。
【JS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript">$(function(){ // サイトアクセス時に非表示にしてから、フェードインさせる $('#wrapper').hide(); $('#wrapper').fadeIn(2000); // リンククリック時にフェードアウトしてから、画面遷移する $('a').click(function(){ // URLを取得する var url = $(this).attr('href'); // URLが空ではない場合 if (url != '') { // フェードアウトしてから、取得したURLにリンクする $('#wrapper').fadeOut(1000); setTimeout(function(){ location.href = url; }, 1000); } return false; });});</script> |
【HTML】
1 2 3 4 5 6 | <body> <div id="wrapper"> ページ内容を記載<br> <a href="http://raining.bear-life.com/">リンク</a> </div></body> |
フェードイン、フェードアウトするスピードを調整する場合は、
「fadeIn()」、「fadeOut()」、「setTimeout()」の数値を変更します。
また、コンテンツごとに設定することも可能なので、動きのあるサイトを作ることができると思います。
※下記、追記します。
aタグに「target=”_blank”」を付けていた場合、正常に動作しないのでフェードさせるリンクにclassを追加して調整しました。
【JS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript">$(function(){ // サイトアクセス時にbodyを非表示にしてから、フェードインさせる $('#wrapper').hide(); $('#wrapper').fadeIn(2000); // リンククリック時にフェードアウトしてから、画面遷移する $('a.fadelink').click(function(){ // URLを取得する var url = $(this).attr('href'); // URLが空ではない場合 if (url != '') { // フェードアウトしてから、取得したURLにリンクする $('#wrapper').fadeOut(1000); setTimeout(function(){ location.href = url; }, 1000); } return false; });});</script> |
【HTML】
1 2 3 4 5 6 7 | <body> <div id="wrapper"> ページ内容を記載<br> <a href="http://raining.bear-life.com/" class="fadelink">リンク</a><br> <a href="http://raining.bear-life.com/" target="_blank">リンク</a> </div></body> |
フェードさせるリンクに「class=”fadelink”」を追加しております。
そしてjQueryの処理で「$(‘a.fadelink’).click(function(){」の箇所を変更してます。
今までは、aタグをクリックした場合の処理を記述してましたがクラスが設定されているリンクの場合にしました。
■ サンプルページを追加しました。
【jQuery】ページアクセス、リンク時にフェードする方法｜サンプルページ
ピンバック: ページ遷移時にちょっとフェードとかしてなんかオシャレにしたい | 8月31日（ほずのみや）
初めまして。
ふわっと画面遷移する方法を調べていて、このページにたどり着きました。
すごくいい感じなので、利用させていただこうと思います。
なのですが、導入すると、[ target=”_blank” ]が効かなくなり、同じタブで開くようになってしまいました。
もしかしたらこのコードが原因ではないかもしれないのですが、何か解決策がありましたら是非とも教えていただきたいです。
私は、JQueryが書けないので、自分で解決できず申し訳ないのですが、助けていただけると幸いです。
solaさん
コメントありがとうございます！
今までの処理だと「target=”_blank”」がうまく動きませんでした。
追記で内容を記載したので、確認してみてください。
フェードさせるリンクにクラスを追加し、そのクラスが設定されているリンクの時だけ動作するように変更しています。
ピンバック: ページ移動の時に、フェードイン フェードアウトの処理を導入するときにやったこと | 9ineBB