패럴랙스 이펙트 01. 메뉴이동

 

//el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동하기 
        document.querySelectorAll("#parallax__nav li a").forEach(li =>{
            li.addEventListener("click", (e)=>{
                e.preventDefault();
                document.querySelector(li.getAttribute("href")).scrollIntoView({
                    behavior: "smooth"
                })
            })
        })
        //스크롤 값 구하기 
        window.addEventListener("scroll", ()=>{
            //3가지 방법을 쓸 수 있음.
            // let scrollTop = window.pageYOffset;
            // let scrollTop = document.documentElement.scrollTop;
            // let scrollTop = window.scrollY;
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
        
            //스크롤이 내려감에 따라서 액티브가 바뀌도록 하는 스크립트
            // let nav = document.querySelectorAll("#parallax__nav ul li");         
            // for(let i =1; i<= nav.length; i++){
            //     if(scrollTop >= document.getElementById("section0"+ i).offsetTop -2){
            //     document.querySelectorAll("#parallax__nav ul li").forEach(li => {                    
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child("+i+")").classList.add("active");                                           
            //     }
            // }
            //forEach
            document.querySelectorAll(".content__item").forEach((e,i)=>{
                if (scrollTop >= e.offsetTop -2){
                    document.querySelectorAll("#parallax__nav ul li").forEach( li => {
                        li.classList.remove("active")
                    })
                    document.querySelector("#parallax__nav li:nth-child("+(i+1)+")").classList.add("active")
                }
            })
       



            //info
            document.querySelector(".srcollTop span").innerText = Math.round(scrollTop);    //스크롤 탑 값을 구해서 출력
            document.querySelector(".offset1").innerText = document.getElementById("section01").offsetTop;
            document.querySelector(".offset2").innerText = document.getElementById("section02").offsetTop;
            document.querySelector(".offset3").innerText = document.getElementById("section03").offsetTop;
            document.querySelector(".offset4").innerText = document.getElementById("section04").offsetTop;
            document.querySelector(".offset5").innerText = document.getElementById("section05").offsetTop;
            document.querySelector(".offset6").innerText = document.getElementById("section06").offsetTop;
            document.querySelector(".offset7").innerText = document.getElementById("section07").offsetTop;
            document.querySelector(".offset8").innerText = document.getElementById("section08").offsetTop;
            document.querySelector(".offset9").innerText = document.getElementById("section09").offsetTop;

 

 

마우스를 스크롤링하면 스크롤 좌표값을 알아낸 뒤 움직임에 따라 메뉴의 액티브 클래스가 추가 삭제 되면서 부드럽게 바뀌는 이펙트 입니다. 이미지에도 이전에 한 마우스 이펙트 효과를 줘서 흑백에서 칼라로, 조금 커져 보이는듯 한 효과를 주었습니다.  

스크롤 값을 구하기는 세가지 방법이 있습니다.

let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;

 

 

세 가지 방법이 다 사용가능하므로 논리 연산자를 사용해서 셋중 골라서 쓸 수 있게 작업합니다.