이펙트 응용 편 - 페럴럭스 이펙트 두 번째

페럴럭스 이펙트2

이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다.

원본 소스 보기 원본 사이트 보기

---

scroll관련 코드들 간단요약

먼저 scrollTop 에 조건을 걸어 모든 웹브라우저에 스크롤값을 구합니다.

let scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY;
scroll.innerText = Math.round(scrollTop);

content__item 클래스를 이용해 각 요소의 offsetTop 값을 찾아서
#parallax__dot 에있는 li 에 효과를 입혀줍니다.
또한 forEach는 0부터 시작하므로 인덱스 값 + 1 하시면 됩니다.

 document.querySelectorAll(".content__item").forEach((e, i) => {
    if (scrollTop >= e.offsetTop - 10) {
        document.querySelectorAll("#parallax__dot li").forEach((li) => {
            li.classList.remove("active");
        });
        document.querySelector("#parallax__dot li:nth-child(" + (i + 1) + ")").classList.add("active");
    }
});