jQuery

jQueryプラグインWebページに58種類のエフェクト効果を実装

animsition

今回は、Webページの読み込み時やページ遷移時にフェードインなどのアニメーション効果実装できるjQueryプラグイン【Animsition】のご紹介です。

以前は、エフェクト効果は、18種類ほどだったのですが、最近見たら58種類に増えていました。
超増えてんじゃんwwwって思いながら見てたわけなのですが・・・
デフォルトで【58種類】のアニメーション効果がありますので、少し嬉しいポイントですね。

アニメーション効果も普通にカッコイイですし、なんとローディングまで用意してありますので、特設サイトやオシャレなWEBサイトなどに相性の良いjQueryプラグインだと思います。

また、WordPressでサイトやブログを運営していて、こちらのjQueryプラグインを使いたいけど、実装が少し難しいという方は、WordPressのプラグインもあるみたいなので、そちらを利用してみてもいいかもしれません。
インストールする場合は、プラグインの検索から【Page Transition】と検索すればヒットします。

Page Transition

いや~僕的にいつか使いそうなjQueryプラグインだと思いますので、僕のストックに入れておきたいと思います。www
実際にこちらのjQueryプラグインを利用してデモサイトもありますので、ご参考下さい。

デモサイト

実際に利用する場合は、【Animsition】から必要ファイルをダウンロードして下さい。

Animsition

Animsition 使い方

それでは、【Animsition】を使い方を説明していきたいと思います。
実装するにあたりこちらより必要なファイルなどをダウンロードして下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードした【animsition.min.css】【jquery.animsition.min.js】をhead内に読み込んで下さい。
下記の読み込み時のファイルの階層などは、ご自身の環境に合わせて変更して下さい。

<link rel="stylesheet" href="css/animsition.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.animsition.min.js"></script>

HTML

それでは、次にHTMLの準備をしていきます。
a要素にクラス名【animsition-link】を記述して下さい。

<body>

  <div class="animsition">
  
   	<a href="" class="animsition-link">リンク</a><br>

  </div>

</body>

上記のようにアニメーションしたい要素をdiv.animsitionで包みます。

JavaScript

<script>
$(document).ready(function() {
  
  $(".animsition").animsition({
  
    inClass               :   'fade-in', //ページ読み込み時のエフェクト
    outClass              :   'fade-out', //ページ離脱時のエフェクト
    inDuration            :    1500, //読み込み時の時間
    outDuration           :    800, //離脱時の時間
    linkElement           :   '.animsition-link', //アニメーションを行う要素
    loading               :    true, //ローディングの有効/無効
    loadingParentElement  :   'body', //ローディングを行う要素
    loadingClass          :   'animsition-loading', //ローディングのクラス
    unSupportCss          : [ 'animation-duration',
                              '-webkit-animation-duration',
                              '-o-animation-duration'
                            ],
    //"unSupportCss" 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'//オーバーレイを行う要素
  });
});
</script>

エフェクトの種類は、こちらをご確認下さい。

上記までを記述すれば、実装の完了となります。
また、個別のリンクでエフェクトなどを決めたい場合は、下記コードのように要素に直接記述します。

<a href="" class="animsition-link" data-animsition-out="zoom-out-lg" data-animsition-out-duration="500">ズームアウト・フェードイン</a>

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS buffer

超便利!! 過去記事をSNSに自動投稿するBuffer My Post使い方

NEXT paper-collapse

【JS】かっこいいアコーディオンをスマホサイトにいかがですか?