はじめに
Webページで良く見る、スクロールしたら順番に要素が表示される演出のデモを作成してみました。
JavaScriptのIntersectionObserver
を使っています。
環境
OS: macOS Catalina 10.15.1
結論:デモ
各要素の数字は、data-delay
を何秒に設定したかです。
参考までに表示してあります。
See the Pen PowbvVx by terufumi (@terufumi1122) on CodePen.
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです
参考にさせて頂いたサイト(いつもありがとうございます)
IntersectionObserver?! Scroll Activated Animations & More with No Dependencies - YouTube