スクロールで動く仕組み検証 【Javascript】【脱jQuery】 - Qiita

はじめに 画面をスクロールで、何かの要素が浮かび上がったり、反応する仕組みを、JQuery無しで作るのに、 具体的に要素がどのように判定されているのかを検証するものです。 また、動きの要素にコーディング終了後にクラスを付け加えることで、動きを一括して実装できるので 製作スピードが向上します。 動作デモ See the Pen スクロール判定のデモ by masato yamada (@marchin133) on CodePen. スクロールの計測 スクロールは window.pageYOffset で取得。 判定したい要素の計測 getBoundingClientRect().topで、判定したい要素の上部の、HTMLの一番上からの高さがわかる。 判定ロジック javascript document.addEventListener("DOMContentLoaded", functio