Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
javascriptのプラグインを使用することでスクロール連動型アニメーションを実装することができます。
wow.jsをダウンロード
https://github.com/matthieua/WOW
Animate.cssをダウンロードする
HTML
<!-- Animate.css -->
<link rel="stylesheet" href="animate.css">
<!-- wow.js -->
<script src="wow.js"></script><script>
new WOW().init();
</script>wow.jsの使い方はとても簡単で、アニメーションを加えたい要素に「wow」というクラス名と、Animate.cssのページから実装したいアニメーションを選び、そのアニメーションに対応するクラス名をつけるだけ
オプション
- data-wow-duration・・・アニメーションの時間
- data-wow-delay・・・スクロールが要素に達してからアニメーションがスタートする時間
- data-wow-offset・・・スクロールが要素に達してからアニメーションがスタートする距離
- data-wow-iteration・・・ アニメーションの繰り返し回数
