parallax Effect - 02

스크립트를 이용한 패럴랙스효과 만들기 02

이번에는 메뉴바가 사이드에 있는 형식의 이펙트를 만들어 봅시다✏️ 메뉴의 모양은 닷 모양이랍니다~

원본 소스 보기

사이드 메뉴 닷으로 만들기

<nav id="parallax__dot">
    <ul>
        <li><a href="#section1"><span>메뉴1</span></a></li>
        <li><a href="#section2"><span>메뉴2</span></a></li>
        <li><a href="#section3"><span>메뉴3</span></a></li>
        <li><a href="#section4"><span>메뉴4</span></a></li>
        <li><a href="#section5"><span>메뉴5</span></a></li>
        <li><a href="#section6"><span>메뉴6</span></a></li>
        <li><a href="#section7"><span>메뉴7</span></a></li>
        <li><a href="#section8"><span>메뉴8</span></a></li>
        <li><a href="#section9"><span>메뉴9</span></a></li>
    </ul>
</nav>

닷 메뉴 CSS

#parallax__dot {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100000;
    background-color: rgba(0,0,0,0.4);
    padding: 20px 10px;
    border-radius: 30px;
}
#parallax__dot li {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 12px 8px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
    position: relative;
    transition: box-shadow 0.2s ease;
}
#parallax__dot li.active {
    box-shadow: 0 0 0 2px rgba(255,255,255,1);
}
#parallax__dot li a {
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
#parallax__dot li.active a {
    transform: scale(0.4);
}
#parallax__dot li span {
    display: none;
}

스크롤이동 - script

document.querySelectorAll("#parallax__dot a").forEach(el => {
    el.addEventListener("click", e => {
        e.preventDefault();

        document.querySelector(el.getAttribute("href")).scrollIntoView({behavior:"smooth"});
    });
});

scrollIntoView({behavior:"smooth"})

스크롤을 이동할때 천천히 부드럽게 움직이게 할 수 있습니다.

HTML

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

    document.querySelector("#parallax__info span").innerText = Math.floor(scrollTop);       

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

Math.floor()

숫자를 올림해주는 수학 메서드 입니다.

scroll이동 메서드

window.scroll(0, 1000);
window.scroll({left: 0, top: 2000});
window.scroll({left: 0, top: 2000, behavior: "smooth"});

window.scrollTo(0, 1000);
window.scrollTo({left: 0, top: 2000});
window.scrollTo({left: 0, top: 2000, behavior: "smooth"});

window.scrollBy(0, 1000);
window.scrollBy({left: 0, top: 2000});
window.scrollBy({left: 0, top: 2000, behavior: "smooth"});

window.scrollBy();

상대적 위치
현재 위치를 기준으로 파라미터 값으로 넘겨준 만큼 이동
창을 상대적인 좌표로 스크롤

window.scrollTo();

절대적 위치
왼쪽 상단 모서리를 시작으로 전체 스크롤 값을 기준으로 파라미터로 넘겨준 값으로 이동(현재위치X, 상단모서리 기준)
창을 절대적인 좌표로 이동