Effect - 패럴랙스 효과

패럴랙스 효과

페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다.

scollTop

scrollTop 속성을 이용해서 자신이 보고있는 window환경에서의 위치를 구합니다.

scrollTop보기

 window.addEventListener("scroll", () => {

// let scrollTop = window.pageYOffset;
// let scrollTop = window.scrollY;
// let scrollTop = document.documentElement.scrollTop;
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //한번에 처리

메뉴바 위치 옮기기

section 별로 offset위치를 가져와서 클래스 active를 추가시키고 제거해서 메뉴에 배경을 변화시킵니다.
for문, forEach문으로 만들어 보았습니다.

offset위치

 // 크기에 따라 번호가 바뀐다.
// if (scrollTop >= document.getElementById("section1").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(1)").classList.add("active")
// }
// if (scrollTop >= document.getElementById("section2").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(2)").classList.add("active")
// }
// if (scrollTop >= document.getElementById("section3").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(3)").classList.add("active")
// }
// if (scrollTop >= document.getElementById("section4").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(4)").classList.add("active")
// }
// if (scrollTop >= document.getElementById("section5").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(5)").classList.add("active")
// }
// if (scrollTop >= document.getElementById("section6").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(6)").classList.add("active")
// }
// if (scrollTop >= document.getElementById("section7").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(7)").classList.add("active")
// }
// if (scrollTop >= document.getElementById("section8").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(8)").classList.add("active")
// }
// if (scrollTop >= document.getElementById("section9").offsetTop) {
//     document.querySelectorAll("#parallax__nav li").forEach(li => {
//         li.classList.remove("active")
//     });
//     document.querySelector("#parallax__nav li:nth-child(9)").classList.add("active")
// }


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

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

info

for문을 이용해서 section별로 확인해서 offset값을 출력해 주었습니다.

메뉴바 이동

document.querySelector(".scroll span").innerText = Math.round(scrollTop);
//하단에 각 section별로 offset위치 표시합니다.
for (let i = 1; i <= 9; i++) {
    document.querySelector(".offset" + i).innerText = document.getElementById("section" + i).offsetTop;
}  

info

getAttribute 메서드를 이용해서 section에 속성값을 가져와서 적용시켜줍니다.
scrollIntoView를 사용하여 메뉴바를 부드럽게 이동시켜줍니다.

메뉴바 이동을 부드럽게 해주기

//스크롤이동
    document.querySelectorAll("#parallax__nav li a").forEach(li => {
        li.addEventListener("click", (e) => {
            e.preventDefault();
            document.querySelector(li.getAttribute("href")).scrollIntoView({
                behavior: "smooth"
            });
        });
    });    
}  

결과

원본 소스 보기