スクロールアニメーションを学ぼう

ここで言うスクロールアニメーションは、要素がスクロールによって画面内に入った時にアニメーションを発生させるようなものを指します。

スクロールに合わせて動画部分が出現している。


よく使われるパーツですが、具体的な実装に落とし込むと途端にイメージが難しいです。きちんと仕組みを理解しておきましょう。

そんなスクロールアニメーションを学べる記事をまとめました。

ゆうやの雑記ブログ

URL:https://yuyauver98.me/scroll-visible-range-underline-animation/

非常に簡潔に書かれており、実装方法もシンプルで使い回しの効くやり方になっています。まずはこちらを読んで基本を覚えましょう。

難易度:★☆☆

セカヤサブログ

URL:https://itokoba.com/archives/1797

モーダルウィンドウが開いている時は背景のスクロールを止める方法など、より実践的かつどのような仕組みになっているかを細かく解説しています。

原理まで踏み込んで知りたい方はこちらを読みましょう。

難易度:★★☆

ゆうやの雑記ブログ

URL:https://yuyauver98.me/animate-on-scroll-library/

こちらはAOSというライブラリを使ったパターンです。

実装の手間をかなり省けて、かつ対応範囲が広いです。慣れてきたらこちらを覚えてみましょう。

難易度:★☆☆

Leave a Reply

Your email address will not be published.