JavaScript

スクロールでアニメーション(7行だけで)


GOAL

htmlに7行だけ追加してスクロールアニメーションをつけます。

(すごくシンプルなやり方のため、アニメーションの時間等の設定は一切なしです。

とにかく、素早くアニメーションを実装したい!って時に)


how to


test.html

<header>

.
.
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
.
.
<header>

まずはheaderにCDNを使ったcssを追加します。


test.html

<body>

.
.
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
.
.
<script>
AOS.init();
</script>
</body>

次にbodyの閉じタグの直前にこれまたCDNのjavascriptを追加します。

さらに、初期化処理のinitを追加。


test.html

<body>

.
.
<div data-aos="fade-up"></div>
あとはここを変えるだけでアニメーションが変化する
.
.

ここでやっとアニメーションのコードを追加して動き出します。


参考サイト

AOS - Animate On Scroll Library