WOWの代替に使えるJSを作りました。

2018.05.08
Web

▼ 参考サイト

はせがわ内科・糖尿病内科クリニック
http://hero116019.xsrv.jp/hasegawa-dm.com/HP2/

▼ 必要なファイル群

シェアサーバー/お客様データ/は/はせがわ内科・糖尿病内科クリニックのHPフォルダ

./js/top_animation.js
./js/jquery.inview.js
./css/animate.css

▼ index.htmlに追記するタグ

headタグ内に読み込む

<script src="js/jquery.inview.js"></script>
<script src="js/top_animation.js"></script>

<link rel="stylesheet" type="text/css" href="css/animate.css" media="all" />

◆ 動きをつけたいタグに追加する魔法

動かしたいタグのclassに「iv iv-fadeInUp」を追加

※iv-fadeInUpのfadeInUpはAnimate.cssのクラス名
（「bounce」のアニメーションで動かしたい場合は「iv-bounce」とする）

▼ Animate.cssのサイト
https://daneden.github.io/animate.css/

例

<div class="iv iv-fadeInUp">
    <p>動かしたい箇所</p>
</div>

◆ リストなどで遅延して表示したい場合

当該タグに「data-time=”遅延したい秒数”」を追加

例

<ul>
    <li class="iv iv-fadeInUp"  data-time="400">ほげ1</li>
    <li class="iv iv-fadeInUp"  data-time="800">ほげ2</li>
    <li class="iv iv-fadeInUp"  data-time="1200">ほげ3</li>
    <li class="iv iv-fadeInUp"  data-time="1600">ほげ4</li>
</ul>

◆ Animate.cssではなく、自分で作ったアニメーションを使う場合

style.cssなどの任意のスタイルシートにAnimate.cssのようにアニメーションクラスを作る
クラス名に数字と記号は使わないでください！！！

◆ 動かしたいエリアが表示された時に、そのエリアで任意の動きをつける

（動きを指定するタグが表示さ
れた時に着火ではなく、ターゲットの要素が表示されたら着火する場合)

例：はせがわ内科・糖尿病内科クリニックの「糖尿病専門外来」

タイトルに「fadein_area」クラスを追加
動かしたい要素のタグに「fadeintarget iv-fadeIn」クラスを追加

※以下の例の様にdata-timeの秒数をタグの順番に関わらず指定できます。

<h3 class="fadein_area>大見出し1</h3>
<ul class="fadein_target iv-fadeIn" data-time="0">
    <li class="iv iv-fadeInUp" >小見出し1</li>
    <li class="iv iv-fadeInUp"  data-time="800">内容1</li>
</ul>
<ul class="fadein_target iv-fadeIn" data-time="600">
    <li class="iv iv-fadeInUp" >小見出し2</li>
    <li class="iv iv-fadeInUp"  data-time="800">内容2</li>
</ul>
<ul class="fadein_target iv-fadeIn" data-time="300">
    <li class="iv iv-fadeInUp" >小見出し3</li>
    <li class="iv iv-fadeInUp"  data-time="800">内容3</li>
</ul>