Webページ全体をフェードイン、フェードアウト

プラグイン名　Page Transition

ページ移動時に「フェードイン」や「フェードアウト」などの様々なアニメーションをページ全体にかけるWordPressのプラグインです。

デモ

fade-out
fade-out-up
fade-out-down
fade-out-left
fade-out-right
rotate-out
flip-out-x
flip-out-y
zoom-out

インストール手順

プラグイン > 新規追加 > Page Transition > プラグインを検索 > いますぐインストール > プラグインを有効化

設定

設定 > Page Transition

インとアウトのアニメーションを個別に選択でき、またアニメーションの長さ（時間）も設定できます。
Page In Animation（ページイン時のアニメーション）
Fade In
Fade In Up
Fade In Down
Fade In Left
Fade In Right
Rotate In
Flip In X
Flip In Y
Zoom In
Page Out Animation（ページアウト時のアニメーション）
Fade Out
Fade Out Up
Fade Out Down
Fade Out Left
Fade Out Right
Rotate Out
Flip Out X
Flip Out Y
Zoom Out
Page In Animation Duration
ページインのアニメーションの長さ（400以上）
Page Out Animation Duration
ページアウトのアニメーションの長さ（400以上）
Show Loading
ローディングの表示・非表示
Loading Text Color
ローディングのテキストカラー

個別にアニメーションを指定したい場合

data-animsition-out=”アニメーションの種類”を追加

data-animsition-out-duration=”アニメーションの長さ”を追加

<a href="01.html" data-animsition-out="flip-out-y" 
data-animsition-out-duration="3000">リンク</a>

1 2	<a href="01.html" data-animsition-out="flip-out-y" data-animsition-out-duration="3000">リンク</a>

普通のサイトで使用する場合

上のデモで使用しているのはこちらのjQueryプラグインです。ほとんど同じものですが、アニメーションのパターンが少し増えます。

まずは本家からファイルをゲットします。設置場所やファイル名は各々好きなように

https://git.blivesta.com/animsition/　

設定

まず↓を読み込ませます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

次にダウンロードしたファイル内のjquery.animsition.min.jsとanimsition.min.cssを読み込ませます。

<script type="text/javascript" src="animsition-master/dist/js/jquery.animsition.min.js"></script>

1	<script type="text/javascript" src="animsition-master/dist/js/jquery.animsition.min.js"></script>

<link rel="stylesheet" type="text/css" href="animsition-master/dist/css/animsition.min.css"/>

1	<link rel="stylesheet" type="text/css" href="animsition-master/dist/css/animsition.min.css"/>

最後にアニメーションをさせる対象のclassを指定して↓をページ内に挿入します。".animsition"は環境に合わせ変更してもOK

<script type="text/javascript">
  $(document).ready(function() {    
      $(".animsition").animsition();
  });
</script>

$(document).ready(function() {

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

});

</script>

HTML

アニメーションをさせる場所を(class)animsitionで囲います。

アニメーションを発動させるリンクには(class) animsition-linkを付けます。

<div class="animsition" >

<a href="01.html" class="animsition-link">リンク</a>

</div>

</div>

アニメーションの種類と長さを個別に指定したい場合

<div class="animsition" >

<a href="01.html" class="animsition-link" 
data-animsition-out="flip-out-y" 
data-animsition-out-duration="3000">リンク</a>

</div>

<a href="01.html" class="animsition-link"

data-animsition-out="flip-out-y"

data-animsition-out-duration="3000">リンク</a>

</div>

ページインの個別アニメーションを指定

<div class="animsition" data-animsition-in="flip-in-y" data-animsition-in-duration="4000">

<a href="01.html" class="animsition-link" 
data-animsition-out="flip-out-y" 
data-animsition-out-duration="2000">リンク</a>

</div>

<a href="01.html" class="animsition-link"

data-animsition-out="flip-out-y"

data-animsition-out-duration="2000">リンク</a>

</div>

基本設定

jquery.animsition.js（jquery.animsition.min.js）内の↓周辺を直接変更

 inClass: "fade-in",
 outClass: "fade-out",
 inDuration: 1500,
 outDuration: 800,

inClass: "fade-in",

outClass: "fade-out",

inDuration: 1500,

outDuration: 800,

ページごとに個別の仕様にする場合↓を好みの設定に変更しページ内に挿入

<script type="text/javascript">
  $(document).ready(function() {  
  $(".animsition").animsition({
  
    inClass               :   'flip-in-y-nr',
    outClass              :   'fade-out',
    inDuration            :    1500,
    outDuration           :    1000,
    linkElement           :   '.animsition-link', 
    loading               :    false,
    
  });
});
</script>