HOME > コラム > WEB全般 > ページ遷移する時にフェードなどのエフェクトを加えるjQueryプラグイン「Animsition」の使い方

ページ遷移する時にフェードなどのエフェクトを加えるjQueryプラグイン「Animsition」の使い方

コラム

ページを遷移する時、ページの切り替わりにフェードのエフェクトを加えるjQueryプラグインの紹介です。
オプションが豊富にあるので、リンクをクリックした時、リンク先のページが表示される時などなど、おしゃれな感じの挙動をしてくれます。
ただ、大規模サイトには向かないと言いますか・・・何ページにも実装するのも若干しんどい気がしますし、何より、リンクをクリックするたびにこのような動作をするのはちょっとしんどいところです。
あまり慣れのあるタイプの動作はしないため、その点について考慮する必要はあると思われます。
AnimsitionはそんなタイプのjQueryプラグインです。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

ページ遷移する時にフェードなどのエフェクトを加えるjQueryプラグイン「Animsition」の使い方

リンクをクリックした時の挙動に一捻り加えるjQueryプラグイン

Animsitionは、リンクをクリックしページが切り替わる演出をするjQueryプラグインです。

ロジックの流れとしては、まずbodyタグに記述を行い演出対象のコンテンツを決めます。
これはdivなどで指定しても構いません。

次に、演出をしたいリンク先のaタグにclassを指定して演出のトリガーを作成します。
トリガーを引けば(クリックすれば)挙動する・・・という流れです。

今回、全部のページにAnimsitionを設定していますが、全ページ、このノリで演出をされても少々しんどいかもしれませんね(苦笑)
何せ慣れがないため、変な感じがします。

プロダクトサイトやLP内で回遊して遷移する分にはまだ新鮮かもしれませんが、コーポレートサイトやブログなどでやられると若干しんどい感じもします。
なので、使いどころを選びまくるかもしれないjQueryプラグインです。

ただ、使いどころを間違わなければちょっとしたフックになること間違いなしですので、その時に備えておけるようにしておきたいところですね。

本家サイト

本家サイトです。
GitHubからプラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_anm_160912.zip
組み込み済みサンプル

サンプルです。

サンプルには全ページのリンクにAnimsitionを設定しています。
最もデフォルトの状態です。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「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

全ページに組み入れた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)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

いかがでしたでしょうか?
特に難しいモノではないものの、エフェクトの種類などを選ぶのに若干時間がかかってしまいそうですね。

本家でサンプルがたくさん用意されていますので、エフェクトの内容などはそちらでチェック頂くのがいいかもしれません。
細かい設定をする内容に関してはご自身の環境が必要っぽいですが、それでも簡単に出来てしまいます。

冒頭でも書いたことですが、使いどころを選んでしまう気がしますが、要所要所で上手く使い見せどころをつくると何かと便利な感じがしています。
ブラウザ上での単調な動作に一捻りを加えることが出来るので、ちょっとしたフックをつくりたい方にはおススメのプラグインかもしれませんね。

執筆 : 清水 隼斗

ページ遷移する時にフェードなどのエフェクトを加えるjQueryプラグイン「Animsition」の使い方の通常ページ

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。