Animsitionは、リンクをクリックしページが切り替わる演出をするjQueryプラグインです。
ロジックの流れとしては、まずbodyタグに記述を行い演出対象のコンテンツを決めます。
これはdivなどで指定しても構いません。
次に、演出をしたいリンク先のaタグにclassを指定して演出のトリガーを作成します。
トリガーを引けば（クリックすれば）挙動する・・・という流れです。
今回、全部のページにAnimsitionを設定していますが、全ページ、このノリで演出をされても少々しんどいかもしれませんね（苦笑）
何せ慣れがないため、変な感じがします。
プロダクトサイトやLP内で回遊して遷移する分にはまだ新鮮かもしれませんが、コーポレートサイトやブログなどでやられると若干しんどい感じもします。
なので、使いどころを選びまくるかもしれないjQueryプラグインです。
ただ、使いどころを間違わなければちょっとしたフックになること間違いなしですので、その時に備えておけるようにしておきたいところですね。
本家サイトです。
GitHubからプラグイン一式をダウンロードして頂けます。
phptemp_anm_160912.zip
サンプルです。
サンプルには全ページのリンクにAnimsitionを設定しています。
最もデフォルトの状態です。
当サイト内の「SEOの基礎知識」の中のコンテンツです。
ヘッダ内で読み込ませたファイルです。
<link href="/css/animsition.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="/js/animsition.js"></script> <script type="text/javascript" src="/js/link.js"></script>
今回は全ページに適応させるので、新たにjsファイル（link.js）を作成しまして、そこに設定記述を入れたいと思います。
以下、設定記述です。
$(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', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
// "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
// The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
});
});
全ページに組み入れたhtml記述です。
まずは、全ページのbodyに記述を入れます。
<body class="animsition">
次に、全部のaタグに以下のclassを追加します。
class="animsition-link"
デフォルト設定は以上で完了です。
単純なフェードイン・フェードアウトの演出はこれで終了です。
このプラグインについては、他にもたくさんの挙動をしてくれます。
なかなかお目にかかれないような挙動もしますので、サンプルで記述してみますね。
もし、細かい内容が気になるようでしたら、本家でご確認をお願い致します。
aタグに記述する設定例です。
本家からそのまま頂きました。
<a href="./page1" class="animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000" > animsition link 1 </a>
<a href="./page2" class="animsition-link" data-animsition-out-class="rotate-out" data-animsition-out-duration="500" > animsition link 2 </a>
bodyタグに設定する記述にもバリエーションがあります。
ここでも挙動に変化が出ますので、是非試してみてください。
<body class="animsition" data-animsition-in-class="fade-in" data-animsition-in-duration="1000" data-animsition-out-class="fade-out" data-animsition-out-duration="800" > ... </body>
WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。
いかがでしたでしょうか？
特に難しいモノではないものの、エフェクトの種類などを選ぶのに若干時間がかかってしまいそうですね。
本家でサンプルがたくさん用意されていますので、エフェクトの内容などはそちらでチェック頂くのがいいかもしれません。
細かい設定をする内容に関してはご自身の環境が必要っぽいですが、それでも簡単に出来てしまいます。
冒頭でも書いたことですが、使いどころを選んでしまう気がしますが、要所要所で上手く使い見せどころをつくると何かと便利な感じがしています。
ブラウザ上での単調な動作に一捻りを加えることが出来るので、ちょっとしたフックをつくりたい方にはおススメのプラグインかもしれませんね。
執筆 : 清水 隼斗
「ページ遷移する時にフェードなどのエフェクトを加えるjQueryプラグイン「Animsition」の使い方」のシェアをお願い致します！