오늘은 사이드에 있는 닷을 누르면 해당 좌푯값으로 가는 패럴랙스 효과를 만들어보겠습니당!
패럴랙스 이펙트(2)
구조
<main id="main">
<div class="parallax__wrap">
<section id="section1" class="parallax__item">
<span class="parallax__item__num">01</span>
<h2 class="parallax__item__title">Section1</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">한 번 포기하면 습관이 된다. 절대 포기하지 말아라.</p>
</section>
<!-- //section1 -->
<section id="section2" class="parallax__item">
<span class="parallax__item__num">02</span>
<h2 class="parallax__item__title">Section2</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">꿈이 있으면 잡아야 하고 절대 놓지 말아야 한다.</p>
</section>
<!-- //section2 -->
<section id="section3" class="parallax__item">
<span class="parallax__item__num">03</span>
<h2 class="parallax__item__title">Section3</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">불가능은 오직 의지가 없는 사람에게만 존재한다.</p>
</section>
<!-- //section3 -->
<section id="section4" class="parallax__item">
<span class="parallax__item__num">04</span>
<h2 class="parallax__item__title">Section4</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">불행한 사람은 다른 사람의 불행에서 위안을 얻는다.</p>
</section>
<!-- //section4 -->
<section id="section5" class="parallax__item">
<span class="parallax__item__num">05</span>
<h2 class="parallax__item__title">Section5</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">사랑이 없는 삶은 꽃도 열매도 없는 나무와 같다.</p>
</section>
<!-- //section5 -->
<section id="section6" class="parallax__item">
<span class="parallax__item__num">06</span>
<h2 class="parallax__item__title">Section6</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">무엇이든 사랑하는 방법은 잃어버릴 수 있다는 것을 깨닫는 것입니다.</p>
</section>
<!-- //section6 -->
<section id="section7" class="parallax__item">
<span class="parallax__item__num">07</span>
<h2 class="parallax__item__title">Section7</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공을 얻기 위해 무엇을 포기해야 했는지에 따라 성공을 판단해라.</p>
</section>
<!-- //section7 -->
<section id="section8" class="parallax__item">
<span class="parallax__item__num">08</span>
<h2 class="parallax__item__title">Section8</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">아름다움은 자신을 결정하는 순간부터 시작된다.</p>
</section>
<!-- //section8 -->
<section id="section9" class="parallax__item">
<span class="parallax__item__num">09</span>
<h2 class="parallax__item__title">Section9</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">진짜 어려움은 자신에 대해 생각하는 방식을 극복하는 것입니다.</p>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->스크립트 짜기
<script>
document.querySelectorAll(".parallax__dot li a").forEach(dot => {
dot.addEventListener("click", e => {
e.preventDefault();
document.querySelector(dot.getAttribute("href")).scrollIntoView({behavior: "smooth"});
});
});
window.addEventListener("scroll", () => {
let scrollTop = window.pageXOffset || window.scrollY;
document.querySelector(".parallax__info .scroll span").innerText = scrollTop;
document.querySelectorAll(".parallax__item").forEach((item, num) => {
if(scrollTop >= item.offsetTop-2){
document.querySelectorAll(".parallax__dot li").forEach(li => {
li.classList.remove("active");
});
document.querySelector(".parallax__dot li:nth-child("+(num+1)+")").classList.add("active");
}
});
})
// 스크롤값 설정
// window.scroll(0, 10000);
// window.scroll({left: 100, top: 4000});
// window.scroll({left: 100, top: 4000, behavior: "smooth"});
// window.scrollTo(0, 1000);
// window.scrollTo({left: 0, top: 1000});
// window.scrollTo({left: 0, top: 1000, behavior:"smooth"});
// window.scrollBy(0, 1000);
// window.scrollBy({left: 0, top: 1000});
// window.scrollBy({left: 0, top: 1000, behavior:"smooth"});
</script>먼저, .parallax__dot li a 선택자를 사용하여 .parallax__dot 요소의 하위에 있는 li 요소들의 a 태그를 선택하고, forEach() 메소드를 사용하여 각각의 요소에 클릭 이벤트를 등록합니다. 클릭 이벤트가 발생하면, e.preventDefault()를 사용하여 기본 동작을 막고, scrollIntoView() 메소드를 사용하여 클릭한 요소의 href 속성값으로 이동합니다. 이 때, {behavior: "smooth"} 옵션을 사용하여 부드러운 스크롤링 효과를 적용합니다.
다음으로, window 객체에 scroll 이벤트를 등록합니다. 스크롤 이벤트가 발생하면, window.pageXOffset || window.scrollY를 사용하여 스크롤 값(scrollTop)을 계산하고, .parallax__info .scroll span 요소의 innerText를 이 값으로 변경합니다.
그리고 forEach() 메소드를 사용하여 .parallax__item 요소들을 반복하면서, 스크롤 값(scrollTop)이 해당 요소의 위치 값보다 크거나 같은 경우에는 .parallax__dot li 요소들의 클래스를 변경합니다. num+1은 li 요소의 인덱스 값이므로, querySelector() 메소드를 사용하여 해당 li 요소의 클래스를 변경합니다.
마지막으로, 주석 처리된 코드들은 스크롤 위치를 이동시키는 메소드입니다. scroll() 메소드는 스크롤 위치를 절대값으로 이동시키는 메소드이며, scrollTo() 메소드는 스크롤 위치를 지정한 좌표값으로 이동시키는 메소드입니다. scrollBy() 메소드는 현재 스크롤 위치를 기준으로 상대적인 위치만큼 스크롤을 이동시키는 메소드입니다. 이 세 가지 메소드 모두 {behavior:"smooth"} 옵션을 사용하여 부드러운 스크롤링 효과를 적용할 수 있습니다.
스크롤바 CSS
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 10px;
}
.container::-webkit-scrollbar-track {
background-color: grey;
border-radius: 10px;
box-shadow: inset 0px 0px 5px white;
}::-webkit-scrollbar : 웹킷 기반 브라우저(Chrome, Safari 등)에서만 사용 가능한 스크롤바의 전체 영역을 선택합니다.
width: 10px; : 스크롤바의 너비를 10px로 설정합니다.
::-webkit-scrollbar-thumb : 스크롤바의 썸네일 영역을 선택합니다.
background-color: #000000; : 스크롤바의 썸네일 배경 색상을 검은색(#000000)으로 설정합니다.
border-radius: 10px; : 스크롤바의 썸네일 모서리를 둥글게 만듭니다.
::-webkit-scrollbar-track : 스크롤바의 트랙 영역을 선택합니다.
background-color: grey; : 스크롤바의 트랙 배경 색상을 회색(grey)으로 설정합니다.
border-radius: 10px; : 스크롤바의 트랙 모서리를 둥글게 만듭니다.
box-shadow: inset 0px 0px 5px white; : 스크롤바의 트랙에 흰색(white) 그림자를 추가하여 입체감을 줍니다. inset 속성을 사용하여 그림자를 트랙 안쪽에 추가합니다. 0px 0px 5px는 그림자의 위치와 크기를 나타내며, 첫 번째 값은 수평 위치, 두 번째 값은 수직 위치, 세 번째 값은 그림자의 크기를 나타냅니다.
완성된 페이지와 코드 보기
