2015/01/23

Webページの読み込みをオシャレに演出!!『Animsition』の紹介

Webページを読み込む際に，フェードやフリップ，回転などの演出を加えて表示を行うjQueryプラグイン『Animsition』の使い方を紹介します．

入手方法

https://github.com/blivesta/animsitionにアクセスし，右側のDownload ZIPをクリックして，ZIPファイルをダウンロードします．

ダウンロードしたZIPファイルを解凍し，distフォルダ内にある以下の3つのファイルを読み込みます．

<link rel="stylesheet" href="./dist/css/animsition.min.css">
<script src="./dist/js/jquery.animsition.min.js"></script>

設置方法

HTMLの構造を以下のように，ページに表示される要素を全て囲む要素にクラスを付与します．

<body>
  <div class="animsition">
    <a href="./page1" class="animsition-link">animsition link 1</a>
    <a href="./page2" class="animsition-link">animsition link 2</a>
  </div>
</body>

次に，JavaScriptを使用して，演出のオプションを指定します．

$(document).ready(function() {  
  $(".animsition").animsition({
    inClass               :   'fade-in', // ロード時のエフェクト
    outClass              :   'fade-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' //オーバーレイ要素のラッパー
  });
});