[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition

サイト構築 -JavaScript

Post on:2014年8月29日

ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。

アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。

サイトのキャプチャ

Animsition
Animsition -GitHub

AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。

Animsitionのデモ

デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。

デモのキャプチャ

demo: fade

エフェクトは全部で18種類！
その中からデモで、9種類が楽しめます。

fade系5種類は普通にかっこいいです、flipやzoomは想像していたのと少し違って「おおっ！」となりましたｗ

Animsitionの使い方

Step 1: 外部ファイル

当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="css/animsition.min.css">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="js/jquery.animsition.min.js"></script>

</head>

Step 2: HTML

リンクにclassを加えます。

<div class="animsition">

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

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

</div>

ページごとに異なるアニメーションを使用したい時は、個別に設定することもできます。

<a 
  href="./page1" 
  class="animsition-link" 
  data-animsition-out="flip-out-y"
  data-animsition-out-duration="2000"
>
  animsition link 1
</a>

<a 
  href="./page2" 
  class="animsition-link" 
  data-animsition-out="rotate-out"
  data-animsition-out-duration="500"
>
  animsition link 2
</a>

アニメーションはページ自体に設定することもできます。

<div 
  class="animsition" 
  data-animsition-in-class="zoom-in"
  data-animsition-in-duration="1000"
  data-animsition-out-class="zoom-out"
  data-animsition-out-duration="800"
>
  ...
</div>

Step 3: JavaScript

リンク元のラッパーをjQueryのセレクタで指定し、アニメーションを設定します。

$(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^=#])'
    touchSupport          :    true, 
    loading               :    true,
    loadingParentElement  :   'body', //animsition wrapper element
    loadingClass          :   'animsition-loading',
    unSupportCss          : [ 'animation-duration',
                              '-webkit-animation-duration',
                              '-o-animation-duration'
                            ]
  });
});

sponsors

top of page

©2024 coliss