Parallax Effect 스크롤링 효과 - 사이드 메뉴

	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"});

                // 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"});
                
            })
        }) 

        window.addEventListener("scroll", () => {
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;

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

            // for(let i = 1; i<=9; i++) {
            //     if(scrollTop >= document.getElementById("section" + i).offsetTop -2) {
            //         document.querySelectorAll("#parallax__dot li").forEach(li => {
            //             li.classList.remove("active");
            //         })
            //         document.querySelector("#parallax__dot li:nth-child("+ i +")").classList.add("active");
            //     }
            // }

            //forEach문
            document.querySelectorAll(".content__item").forEach((element, index) => {
                if(scrollTop >= element.offsetTop -2 ){
                    document.querySelectorAll("#parallax__dot li").forEach( li => {
                        li.classList.remove("active");
                    });
                    document.querySelector("#parallax__dot li:nth-child("+ (index +1) + ")").classList.add("active")
                }
          })

자바스크립트로 패럴럭스 스크롤링(Parallax Scroll Effect)을 주는 사이트 입니다.

1번 예제와 거의 동일하지만 Section으로 이동하는 메뉴디자인을 dot모양으로 디자인 했습니다!! 

메뉴는 사이드에 적용 하였고 자바스크립트의 내용은 아래의 설명은 똑같습니다! 

 

마우스를 스크롤하면 마우스의 좌표값을 추출해줍니다.

아래와 같은 변수 설정으로 모든 브라우저에 스크롤값이 적용되게 해줍니다.

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

 

또한 각 Section으로 가는 버튼을 클릭하면 스크롤값을 이용하여 그 Section으로 이동하는 자바스크립트 입니다..

각 Section으로 이동할땐 부드럽게 이동하도록 만들었습니다.

 

참조사이트

패럴랙스 효과

패럴랙스 효과