이펙트 응용하기 | 페럴럭스 이펙트 첫 번째

페럴럭스 이펙트

offsettop 와 scrollTop을 이용하여 메뉴 선택창이 해당 메뉴에 진입되었을때 색이 바뀌는 효과를 만들어 보았습니다.
하지만 이런경우는 대부분 과부화를 일으키기 때문에 조심히 사용하는게 좋을것 같습니다.

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

---

scroll관련 코드들 간단요약

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

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

이제 각 section 에 있는 아이디값을 찾아 이전에 구한 scrollTop 와 세션에있는 offsetTop 값을 비교해
nav에있는 li 요소에 클래스를 추가 해줍니다.

const contentItem = document.querySelectorAll(".content__item");
contentItem.forEach((el, i) => {
  if (scrollTop >= document.getElementById(el.getAttribute("id")).offsetTop - 2) {
    document.querySelectorAll("#parallax__nav li").forEach((li) => {
      li.classList.remove("active");
    });
    document.querySelector("#parallax__nav li:nth-child(" + (i + 1) + ")").classList.add("active");
  }

마지막으로 메뉴 탭을 클릭할때 이동하는 효과를 주기위해 scrollIntoView({ behavior: "smooth" } 작성했습니다.

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