こんにちは、札幌でWEB制作を行なっている石田颯(はやて)です。
東京オリンピックが盛り上がっており、現在日本がメダル獲得数1位ですね！
本当に選手の方々はすごいと思います。
本題ですが、今回サイトリニューアル1回目のブログ投稿ですが、JavaScriptでスクロール時にクラスを付与する方法を記載します。
目次
コード
早速ですが、コードが下記になります。
簡単に少ない記述で実装できます。
function scrollAddClass() {
const scrollEffect = document.querySelectorAll('.js-scroll');
let windowHeight = window.innerHeight;
for (let i = 0; i < scrollEffect.length; i++) {
target = scrollEffect[i].getBoundingClientRect().top;
if (target < windowHeight) {
scrollEffect[i].classList.add('is-active');
}
}
}
document.addEventListener('DOMContentLoaded', scrollAddClass);
document.addEventListener('scroll', scrollAddClass);上記のコードを使用して作成したデモを用意しましたので、下記リンクより確認してみてください。
コード解説
const scrollEffect = document.querySelectorAll('.js-scroll');js-scrollとクラス名が付いている要素を全て取得しています。
let windowHeight = window.innerHeight;画面(ディスプレイ)の高さを取得しています。
for (let i = 0; i < scrollEffect.length; i++) {
target = scrollEffect[i].getBoundingClientRect().top;
if (target < windowHeight) {
scrollEffect[i].classList.add('is-active');
}
}取得したjs-scrollとクラスが付いている要素のそれぞれの画面の上からの距離を取得し、画面内に入ったらis-activeというクラスを付与しています。
document.addEventListener('DOMContentLoaded', scrollAddClass);
document.addEventListener('scroll', scrollAddClass);最後にDOMの読み込み後と画面スクロール時にイベントが発生するようにし、完了です！
簡単に実装することができました！
あとは、クラス付与後にCSSでスタイルをあてることで色々な表現ができます！
是非ご活用ください！
