Parallax Effect 02

Parallax Effect 02

슬라이드를 할 때 사이드 버튼이 active 되는 것과, 버튼을 눌렀을 시 부드럽게 움직이는 이펙트를 제작하였습니다.
먼저 기본 사이트를 제작하는 법 이후, Parallax 사이트를 만들 때 사용하는 메서드나 스크립트를 알려드리겠습니다.

01. HTML

이름을 가졌던 메뉴들이 이번엔 dot으로 변했습니다. 그것을 span으로 감싸, 텍스트가 나오지 않게 만들어줍니다.

🦠 HTML 의 코드 보기

<nav id="parallax__dot">
    <ul>
        <li class="active"><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>

02. Css

dot들이 구조나 active가 되었을 때 어떻게 변하는지 css로 작성했습니다. 또한, 선택되었을 때엔 애니메이션을 줍니다.

🦠 CSS의 코드 보기

#parallax__dot {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
    background: rgba(90, 90, 90, 0.466);
    padding: 20px 10px;
    border-radius: 30px;
}
#parallax__dot li {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 12px 8px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
    transition: box-shadow 0.2s ease;
}
#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 {
    box-shadow: 0 0 0 2px rgba(255,255,255,1);
}
#parallax__dot li.active a {
    transform: scale(0.4);
}
#parallax__dot li span {
    display: none;
}

03. Javascript

parallax의 첫번째와 비슷하지만, 다른 점들은 아래에서 설명해보겠습니다.

🦠 Javascript의 코드 보기

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

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

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

})

사용된 스크립트

01 ) 이벤트를 없애주는 스크립트

이벤트.preventDefault()

02 ) 요소를 불러오는 방법

el.getAttribute("href")

원본 소스 보여주기

원본 사이트 보여주기