2015/01/23

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

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' //オーバーレイ要素のラッパー
  });
});

サンプル

http://git.blivesta.com/animsition/に各種エフェクトのサンプルがあります.

まとめ

あまり目につくところでは無いと思いますが,ロードに時間のかかるページや,遊び心のあるサイトを作成する際に使ってみてはいかがでしょうか.