Webサイト上でリンクをクリックした際、通常のページ遷移では画面がパッと切り替わるだけ。
それだと何か味気ない感じもするので、ページ遷移の際にアニメーションで表示されるエフェクトを実装してみました。
今回はそれの忘備録のために書きます。
animation.jsを使用する
今回使用したのは「animation.js」というプラグイン。
まずはそれを以下のサイトからダウンロード
ファイルの読み込み
ダウンロードしたらファイルを読み込みます。
|
1 2 3 |
<link rel="stylesheet" href="../dist/css/animsition.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="../dist/js/jquery.animsition.min.js"></script> |
HTMLを記述
HTMLはシンプルで、Aタグにセレクタ「animsition-link」を記述
|
1 2 3 4 5 6 7 |
<body> <div class="animsition"> <a href="" class="animsition-link">リンク</a><br> </div> </body> |
JavaScriptを記述
以下のJavaScriptを記述します。
|
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 27 28 |
<script> $(document).ready(function() { $(".animsition").animsition({ inClass : 'fade-in', // ロード時のエフェクト outClass : 'fade-out', //離脱時のエフェクト /* 全アニメーションの名前 * Fade: fade-in fade-out fade-in-up fade-out-up fade-in-down fade-out-down fade-in-left fade-out-left fade-in-right fade-out-right * Rotate: rotate-in rotate-out * Flip: flip-in-x flip-out-x flip-in-y flip-out-y * Zoom: zoom-in zoom-out */ inDuration : 1500, //ロード時の演出時間 outDuration : 800, //離脱時の演出時間 linkElement : '.animsition-link', //アニメーションを行う要素 // e.g. linkElement : 'a:not([target="_blank"]):not([href^=#])' loading : true, //ローディングの有効/無効 loadingParentElement : 'body', //ローディング要素のラッパー loadingClass : 'animsition-loading', //ローディングのクラス unSupportCss : [ 'animation-duration', '-webkit-animation-duration', '-o-animation-duration' ], overlay : false, //オーバーレイの有効/無効 overlayClass : 'animsition-overlay-slide', //オーバーレイのクラス overlayParentElement : 'body' //オーバーレイ要素のラッパー }); }); </script> |
基本的にはこれでOKです。簡単ですね。
AタグのクラスをJavaScriptで追加する
上記のようにAタグにはセレクタ「animsition-link」が必要ですが、たくさんあるとメンドクサイのでJavaScriptで制御するのもいいかなと。
|
1 2 3 |
jQuery(function($){ $('a').addClass("animsition-link"); }); |
次回、機会があったら、プラグインなしで実装する方法を書きたいと思います。