chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2014/09/03

[jQuery]15種類以上!ページ遷移アニメーションを簡単に実装できるプラグイン「Animsition」

次のページへの遷移などの際に、アニメーションを付けて遷移させてくれるプラグイン「Animsition」をご紹介いたします。アニメーションの種類は15種類以上もあり豊富な選択肢があります。プラグインサポートはCSS3が必須となっており、IE10+/Safari/Chrome/Firefox/Operaとなっております。

Animsition

ページ遷移にちょっとしたアクセントになる、ページ遷移アニメーションを簡単に実装できるプラグインAnimsitionをご紹介致します。

animsition-2-2

使い方

Githubよりプラグインをダウンロードし、解凍します。

解凍後、distフォルダ内にある、css/animsition.min.css , js/jquery.animsition.min.js を使用します。

htmlのhead内のコードは以下となります。

<!-- animsition CSS -->
<link rel="stylesheet" href="/common/css/animsition.min.css">

<!-- jsコアファイル -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- animsition js -->
<script src="/common/js/jquery.animsition.min.js"></script>

次にhtmlのソースはこんな感じです。

<body>

<div class="animsition">

<a href="./page1/index.html" class="animsition-link">animsition link 1</a>

<a href="./page2/index.html" class="animsition-link">animsition link 2</a>

</div>

</body>

最後にjQueryのコードの説明を致します。

$(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^=#])' //#やtarget="_blank"を除くaリンクを全て対象なども出来ます
      touchSupport : true,
      loading : true, //ロードを有効/無効
      loadingParentElement : 'body', //ロード中を表示するラッパー要素
      loadingClass : 'animsition-loading', //ロードと表示するクラス
      unSupportCss : [ 'animation-duration',
                       '-webkit-animation-duration',
                       '-o-animation-duration'
                     ]
 });
});

 

基本的な設定は以上です。

さらに、個別でアニメーションを分けたい場合はリンクに対して以下のような記述を追加します。

<!--
data-animsition-outで次ページで移る際のアニメーションタイプを指定
data-animstion-out-durationでアニメーションの時間の設定
-->
<a href="./page1/index.html" class="animsition-link"
data-animsition-out="flip-out-y" data-animsition-out-duration="2000">
animsition link 1
</a>

まとめ

いかがだったでしょうか。フェード系は普通にかっこいい感じでした。

個人的にはFlipやZoomは、あまり使わないかな・・・と思いました。

よろしければ、お試しください!

 

 

今後の励みになりますので、良かったらシェアをお願いします。

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