スクロールギミック

スクロールするとフワっと表示

①プラグインAOS.jsを使用。

CDNを利用する場合は、以下のコードを読み込みます。

<!-- CSS読み込み -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<!-- js読み込み -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

②アニメーションさせたい要素の指定に、HTMLにdata-aos属性を指定。

<div data-aos="fade">
    アニメーションを使用する要素
</div>

③オプション

data-aos-easing	イージングタイプ	ease
data-aos-anchor-placement	発火位置の指定	top-bottom
data-aos-anchor	発火位置を別要素に指定	null
data-aos-offset	発火までの距離 (px)	120
data-aos-duration	アニメーション時間 (ms)	400
data-aos-delay	発火までの秒数 (ms)	0
data-aos-once	発火を1回のみにする	false
data-aos-mirror	発火条件となるスクロールの方向	ture