패럴랙스 이펙트 02. 사이드 메뉴

 

 document.querySelectorAll("#parallax__dot a").forEach(el=>{
            el.addEventListener("click", (e)=>{
                e.preventDefault();

                // window.scroll(0, 1000);
                // window.scroll({left: 0, top: 1000});
                // window.scroll({left: 0, top: 1000, behavior: "smooth"});
                // window.scrollTo(0, 1000);
                // window.scrollTo({left: 0, top: 1000});
                // window.scrollTo({left: 0, top: 1000, behavior: "smooth"});

                //scrollBy는 현재 기준점 을 기준으로 하기 때문에 현 위치에서 이동함.
                // window.scrollBy(0, 1000);
                // window.scrollBy({left: 0, top: 1000});
                // window.scrollBy({left: 0, top: 1000, behavior: "smooth"});

                document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});
                //el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동하기 
            })
        })
        //스크롤 Y축 값 구하기
        window.addEventListener("scroll", ()=>{
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;

            document.querySelector(".srcollTop").innerText = Math.round(scrollTop);

            //스크롤이 내려감에 따라서 액티브가 바뀌도록 하는 스크립트
            //for문
            // for(let i =1; i<=9; i++){
            //     if(scrollTop >= document.getElementById("section0"+ i).offsetTop-2){
            //         document.querySelectorAll("#parallax__dot li").forEach(li=>{
            //             li.classList.remove("active");                        
            //         })
            //         document.querySelector("#parallax__dot ul li:nth-child("+i+")").classList.add("active");
            //     }
            // }           
            //forEach
            document.querySelectorAll(".content__item").forEach((e,i)=>{
                if (scrollTop >= e.offsetTop -2){
                    document.querySelectorAll("#parallax__dot ul li").forEach( li => {
                        li.classList.remove("active")
                    })
                    document.querySelector("#parallax__dot li:nth-child("+(i+1)+")").classList.add("active")
                }
            })
        });

 

 

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

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

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

 

 

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