초짜코딩의 잡동사니

parallaxEffect04 - 나타나기 본문

Script Sample/parallax effect

parallaxEffect04 - 나타나기

초짜코딩 2022. 3. 11. 16:10 

function scroll(){
    let scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop
    document.querySelector(".scrollTop span").innerText =Math.round(scrollTop);

    // if(scrollTop> document.getElementById("section1").offsetTop){
    //     document.getElementById("section1").classList.add("show");
    // }
        document.querySelectorAll(".content__item").forEach((element, index) => {
        if(scrollTop > document.getElementById("section"+(index+1)+"").offsetTop - window.innerHeight/2){
            document.getElementById("section"+(index+1)+"").classList.add("show");
        }
    })
    requestAnimationFrame(scroll);
}
scroll();

'Script Sample > parallax effect' 카테고리의 다른 글

parallaxEffect06 - 텍스트 효과  (0) 2022.03.11
parallaxEffect05 - 이질감 효과  (0) 2022.03.11
parallaxEffect03 - 숨긴메뉴  (0) 2022.03.11
parallaxEffect02 - 사이드메뉴  (0) 2022.03.11
parallaxEffect01 - 메뉴이동  (0) 2022.03.11
'Script Sample/parallax effect' Related Articles more