2018.8.5

Animsition.jsを使ってページ遷移を演出しよう

どうも、kuroro0319です。

最近はSPAのフレームワークを使った、
ページ遷移がシームレスなWebサイトも増えてきましたね。
とてもかっこいいんですが、ノンプログラマーな
コーダーよりのWebデザイナーにはちょっと理解が難しい部分があり、
案件で使うのはまだ躊躇してしまいます。

しかし、外注も使えないとなった時にちょうどいい、
それっぽい演出ができるJSライブラリのAnimsition.jsを発見したので、
ここにメモがてら記述していきます。

Animsition.jsとは？

Animsition.jsについてはこちらの公式デモを見てもらうとわかりやすいです。
サイトの遷移時にアニメーション演出を入れて、通常のページ遷移よりも
リッチな体験をユーザーに提供するJSのライブラリになります。

Animsition.jsを設置しよう

ものは試しと、まずはGitHubにある公式サイトで、
データをダウンロードしましょう。
ダウンロードしたら、「dist」フォルダ内の「animsition.min.css」と
「animsition.min.js」をサイトに設置しましょう。
jQueryは「animsition.min.js」より前に設置しましょう。

<!-- animsition.css -- >
<link rel="stylesheet" href="./dist/css/animsition.min.css" ;>
<!-- jQuery -- >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script >
<!-- animsition.js -- >
<script src="./dist/js/animsition.min.js" ;></script >

上記のようになります。

< 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 >

次に上記のように全体を「animsition」というclassで囲みましょう。
そして、遷移を演出したいリンクのaタグに「animsition-link」というclassをつけましょう。

$(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', // ローディングのクラス
    loadingInner: '', // e.g '' ローディングの内容
    timeout: false, // 一定時間が経ったらアニメーションをキャンセルの有効/無効
    timeoutCountdown: 5000, // アニメーションをキャンセルするまでの時間
    onLoadEvent: true, // onLoadイベント後にアニメーションをするかの有効/無効
    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".
    // ブラウザが配列内のCSSプロパティをサポートしていない場合、アニメーションを中止します。デフォルトは「animation-duration」をサポートしていない場合です。
    overlay : false, // オーバーレイの有効/無効
    overlayClass : 'animsition-overlay-slide', // オーバーレイのクラス
    overlayParentElement : 'body', // オーバーレイ要素のラッパー
    transition: function(url){ window.location.href = url; } // transition後にどこに遷移させるかを設定、urlは「linkElement」のhref
  });
});

最後に上記のように、jsを設定しましょう。

$(".animsition").animsition();

ただ、カスタマイズをせずに、基本設定のママで問題ない場合は
上記のように最低限の設定で問題ありません。

Animsition.jsを使ってみての感想

詳しい中の仕組みを知らずに使っているので、
実際どのような仕組みで動いているのかはわからないのですが、
非常に簡単にページ遷移時の演出ができるので、とてもいいと思います。
SPAはやってみたいけど、ハードルが高いと感じたり、
SPAは演出のために入れたい等、SPAを実装するまでもないけど、
SPA風の演出を手軽にしてみたい時にとても重宝すると思います。
公式デモにはFade以外にもOverlayをするサンプルや
メソッドなどもありますので、是非活用してみてください。