WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

スクロールしたら要素が現れる

ウィンドウの高さを取得

//例
const $win_hight = document.documentElement.clientHeight;

要素の位置を取得

//例
const $boxs = document.getElementsByClassName('box')[0];
console.log($boxs.offsetTop);

scrollイベント

window.addEventListener('scroll', () => {
    console.log('スクロール', window.scrollX, window.scrollY);
});

サンプルコード

<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
body{
    padding-top: 800px;
}
.box{
    margin: 100px auto;
    width: 300px;
    height: 300px;
    background: #000;
}
.fadeIn{
    opacity: 0;
    transform: translateY(100px);
    transition: 1s;
}
.fadeIn.on{
    opacity: 1;
    transform: translateY(0);
}
const $fadeIn = document.querySelectorAll('.fadeIn');
window.addEventListener('scroll' , () => {
    // スクロール量を取得
    let scrollY = window.scrollY;
    // ウィンドウの高さを取得
    let $win_h = document.documentElement.clientHeight;
    for (let a = 0; a < $fadeIn.length; a++) {
        // 各要素の位置を取得
        let offsetTop = $fadeIn[a].offsetTop;
        // 要素がウィンドウの高さ-200pxの位置に来たらclassを付与する
        if (scrollY + $win_h - 200 > offsetTop) {
            $fadeIn[a].classList.add('on');
        }else{
            $fadeIn[a].classList.remove('on');
        }
    }
})

さらに応用で関数にしました

処理の内容は

  • ページが読み込まれたら処理の開始
  • スクロール時に監視し、条件が一致したら発火(classを付与)
  • ページを読み込み時に、条件が一致していたら発火(classを付与)
/* --------------------------------
スクロールアニメ関数
要素が現れたらクラスを付与する
------------------------------------ */
/* 
 * 第1引数:classの指定(ドットを必ず付けること)
 * 第2引数:発火してから付与されるclassの指定
 * 第3引数:発火タイミング(下から何ピクセルか?)
 */
function scroll_anime($set_class='.fadeIn' , $on_class='on' , $in_px='0'){
    document.addEventListener('DOMContentLoaded', function() {
        const $fadeIn = document.querySelectorAll($set_class)
        if ($fadeIn) {

            function fade_set(){
                for (let i = 0; i < $fadeIn.length; i++) {
                    object = $fadeIn[i].getBoundingClientRect().top - window.innerHeight
                    if (object <= $in_px) {
                        $fadeIn[i].classList.add($on_class)
                    }else{
                        $fadeIn[i].classList.remove($on_class)
                    }
                }
            }
            window.addEventListener('load' , fade_set)
            window.addEventListener('scroll' , fade_set)
        }
    });
}