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

페럴럭스 이펙트6

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

---

js 코드 설명

글자 하나하나마다 효과를주기위해서 split를 이용하여 자르고 join을 이용하여 span 태그를 주었습니다.
스크롤시 해당하는 위치값이 되면 애니메이션 효과를주기위해
item.querySelector(`.split span:nth-child(${index + 1})`).style.transitionDelay = `${index * 100}ms`;
이용했습니다.

//글씨 나누기
document.querySelectorAll(".split").forEach((text) => {
    let splitText = text.innerText;
    let splitTextWrap = splitText.split("").join("split/span>splitspan aria-hidden='true'>");
    text.innerHTML = "splitspan aria-hidden='true'>" + splitTextWrap + "split/span>";
    text.setAttribute("aria-label", splitText);
});
function scroll() {
    let scrollTop = window.scrollY;
    document.querySelector("#parallax__info .scroll span").innerText = Math.round(scrollTop);

    document.querySelectorAll(".content__item").forEach((item) => {
        if (scrollTop >= item.offsetTop) {
            item.querySelectorAll(".split span").forEach((span, index) => {
                item.querySelector(`.split span:nth-child(${index + 1})`).style.transitionDelay = `${index * 100}ms`;
                span.classList.add("show");
            });
        }
    });
    requestAnimationFrame(scroll);
}

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