今度は実際に実用的にアニメーションのエフェクトを行う為の説明となります。
下準備
|
1 |
<img class="wow bounce" src="https://hp-morph.com/customer/struct/wp-content/uploads/hoge.png" alt="hoge" /> |
class属性に着目して頂くと”wow”というのが追加されたかと思います。
この対処が各ブラウザへアクセスした後にいつのタイミングでアニメーションを挙動させるかを決めるスイッチの役割をします。
（”animated”は残しておいても挙動する場合もありますが、複数同様の設定を行う場合、アニメーションがうまく動かないケースもある為、残しておくようにしていただくほうが得策です）
スクロールしてから対象ブロックが表示されてから「秒数で」アニメーションがスタートする設定
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
|
1 2 3 4 5 6 |
<div class="column2_50 animated wow fadeInUp" data-wow-delay="2s"> <img src="https://hp-morph.com/customer/struct/wp-content/uploads/hoge.png" alt="hoge" /> </div> <div class="column2_50 animated wow fadeInDown" data-wow-delay="2s"> <p>説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。</p> </div> |
data-wow-delay=”2s”
このタグ内に入っているコードが、「スクロールしてから対象ブロックが表示されてから2秒後に表示」という意味を表し、”2s”が2秒、という意味です。(“1.5s”等の小数点も設定可能です。)
※本コードはclass属性ではなく、div等のコード内に入れる要素となりますのでご注意下さい。
アニメーションの時間を設定
今回は分かりやすいように、スクロールしてから対象ブロックが表示されてからアニメーションがスタートする設定を1秒にしつつご覧いただきます。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
|
1 2 3 4 5 6 |
<div class="column2_50 animated wow fadeInUp" data-wow-delay="1s" data-wow-duration="3s"> <img src="https://hp-morph.com/customer/struct/wp-content/uploads/hoge.png" alt="hoge" /> </div> <div class="column2_50 animated wow fadeInDown" data-wow-delay="1s" data-wow-duration="3s"> <p>説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。</p> </div> |
data-wow-duration=”5s”
このタグ内に入っているコードが、「アニメーションの時間を5秒間かけて表示」という意味です。(“1.5s”等の小数点も設定可能です。)
ご覧の通り、アニメーションスタートとfadeInの指定でこの時間に関してもかなり遅く感じるかと思います。
※本コードはclass属性ではなく、div等のコード内に入れる要素となりますのでご注意下さい。
スクロールしてから対象ブロックが表示されてからアニメーションをスタートさせる「位置」を設定
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
|
1 2 3 4 5 6 |
<div class="column2_50 animated wow fadeInUp" data-wow-offset="700"> <img src="https://hp-morph.com/customer/struct/wp-content/uploads/hoge.png" alt="hoge" /> </div> <div class="column2_50 animated wow fadeInDown" data-wow-offset="700"> <p>説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。</p> </div> |
data-wow-offset=”700″
上記はアニメーションと秒数との違いはかなり違いが分かりにくいものではあるが、スクロールした後に表示させたいのが秒数でなのか、それともスクロールしてからどの位の位置(スクロールしてからの高さ？とでも言うべきか)に画面が達したのか？で分かれる。
※本コードはclass属性ではなく、div等のコード内に入れる要素となりますのでご注意下さい。
アニメーションを繰り返す回数の設定
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。
|
1 2 3 4 5 6 |
<div class="column2_50 animated wow rubberBand" data-wow-offset="1" data-wow-iteration="5"> <img src="https://hp-morph.com/customer/struct/wp-content/uploads/hoge.png" alt="hoge" /> </div> <div class="column2_50 animated wow rubberBand" data-wow-offset="1" data-wow-iteration="5"> <p>説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。<br />説明文が入ります。説明文が入ります。説明文が入ります。</p> </div> |
data-wow-iteration=”5″
5回繰り返す、という意味。アニメーションによって使いどこを決めそうな設定。
※本コードはclass属性ではなく、div等のコード内に入れる要素となりますのでご注意下さい。
まとめ
以上が実用的にアニメーションのエフェクトを行う為の方法でした。
ご覧いただいた事で分かるかと思いますが、設定にはかなりの細かい意図が無いと比較的大変なものになるかと思います。
以下が実用的に利用したコンテンツの一覧となりますので、こちらを元に設定を行って頂くのもよいかもしれません。