WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

スクロール途中で要素が消える

/* --------------------------------
スクロールアニメ関数 2
スクロールして要素が画面から無くなる直前に
クラスを付与する
------------------------------------ */
/* 
 * 第1引数:classの指定(ドットを必ず付けること)
 * 第2引数:発火してから付与されるclassの指定
 * 第3引数:発火タイミング(要素の高さの何分の1の高さの地点で) 初期値は1.2
 */
function fadeOut($set_class='.fadeOut' , $on_class='off' , $off_set='1.2'){
    document.addEventListener('DOMContentLoaded', function() {
        const $fadeOut = document.querySelectorAll($set_class)
        if ($fadeOut) {
            window.addEventListener('scroll' , ()=> {
                for (let i = 0; i < $fadeOut.length; i++) {
                    let top = $fadeOut[i].getBoundingClientRect().top
                    let bottom = $fadeOut[i].getBoundingClientRect().bottom
                    let off = (bottom - top)/$off_set
                    if (bottom < off) {
                        $fadeOut[i].classList.add($on_class)
                    }else{
                        $fadeOut[i].classList.remove($on_class)
                    }
                }
            })
        }
    });
}
fadeOut()