parallaxEffect02 - 사이드 메뉴

개요

오른쪽 중간에 사이드 동그라미가 있는데,

클릭하면 자연스럽게(smooth하게) 이동하고, 또 스크롤함으로써 동그라미 모양이 바뀌도록 하였다

 

HTML 구성

<nav id="parallax__dot">
    <ul>
        <li class="active"><a href="#section1"><span>s1</span></a></li>
        <li><a href="#section2"><span>s2</span></a></li>
        <li><a href="#section3"><span>s3</span></a></li>
        <li><a href="#section4"><span>s4</span></a></li>
        <li><a href="#section5"><span>s5</span></a></li>
        <li><a href="#section6"><span>s6</span></a></li>
        <li><a href="#section7"><span>s7</span></a></li>
        <li><a href="#section8"><span>s8</span></a></li>
        <li><a href="#section9"><span>s9</span></a></li>
    </ul>
</nav>

active가 붙으면 css효과를 주었다 

css는 그저 생략했을 거지만 이 방법은 조금 독특해서 소개하고자 한다.

CSS 구성

#parallax__dot {
    position: fixed;
}

#parallax__dot li {
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
    transition: box-shadow .2 ease;
}

#parallax__dot li a {
    position: absolute;
    top: 0; left: 0; 
    border-radius: 50%;
    transition: all .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);
}

 

* box-shadow(수평수직 거리, 흐릿함과 확산 정도, 색상)

box-shadow는 테두리를 감싼 그림자 효과를 추가한다

 

li 태그에 클래스 active가 붙으면 박스쉐도우의 투명도를 0에서 1로 바꾸어 주어서 효과를 준다

투명도 조절로 무언가를 표현하는 게 참 신기하다

JS 구성 - 1. 스무스 효과

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

JS 구성 - 2. active 바꿔주기

document.querySelectorAll(".content__item").forEach((element,index) => {
    if(scrollTop >= element.offsetTop - 2 ){
        document.querySelectorAll("#parallax__dot ul li").forEach(li => {
            li.classList.remove("active");
        });
    document.querySelector(`#parallax__dot ul li:nth-child(${index + 1})`).classList.add("active");
    }
})

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/parallaxEffect02.html