완성 화면
코드 보기 / HTML
<div class="parallax__wrap">
<section id="section1" class="parallax__item">
<span class="parallax__item__num">01</span>
<h2 class="parallax__item__title">Section 01</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">좋은 책은 우리에게 생각하는 법을 가르쳐준다.</p>
</section>
<!--//section 01-->
<section id="section2" class="parallax__item">
<span class="parallax__item__num">02</span>
<h2 class="parallax__item__title">Section 02</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">독서란 삶의 전체를 돌아보는 것이다.</p>
</section>
<!--//section 02-->
<section id="section3" class="parallax__item">
<span class="parallax__item__num">03</span>
<h2 class="parallax__item__title">Section 03</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">이미 달은 충분히 밝다. 우리가 할 일은 그 빛을 받아들이는 것 뿐이다.</p>
</section>
<!--//section 03-->
<section id="section4" class="parallax__item">
<span class="parallax__item__num">04</span>
<h2 class="parallax__item__title">Section 04</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">달은 어디서든 그 자리에 있지만, 인생에서는 다른 위치에 서 있어야 한다.</p>
</section>
<!--//section 04-->
<section id="section5" class="parallax__item">
<span class="parallax__item__num">05</span>
<h2 class="parallax__item__title">Section 05</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">나는 항상 밤에 달을 볼 때마다, 이 작은 빛이 우리의 모든 문제를 해결할 수 있을 것 같다.</p>
</section>
<!--//section 05-->
<section id="section6" class="parallax__item">
<span class="parallax__item__num">06</span>
<h2 class="parallax__item__title">Section 06</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">달을 보며 꿈을 꾸지 마라. 당신의 발자취를 따라가라.</p>
</section>
<!--//section 06-->
<section id="section7" class="parallax__item">
<span class="parallax__item__num">07</span>
<h2 class="parallax__item__title">Section 07</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">책을 읽는 사람은 많은 삶을 살 수 있다.</p>
</section>
<!--//section 07-->
<section id="section8" class="parallax__item">
<span class="parallax__item__num">08</span>
<h2 class="parallax__item__title">Section 08</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">한 사람이 책 한 권을 읽을 때마다, 세상은 한 명씩 영혼이 더 나아진다.</p>
</section>
<!--//section 08-->
<section id="section9" class="parallax__item">
<span class="parallax__item__num">09</span>
<h2 class="parallax__item__title">Section 09</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">독서는 자유로운 인간이 되는 열쇠이다.</p>
</section>
<!--//section 09-->
</div>
코드 보기 / JAVASCRIPT
window.addEventListener("scroll",()=>{
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
document.querySelectorAll(".parallax__item").forEach((item, index) => {
if(scrollTop >= item.offsetTop - 2) {
document.querySelectorAll(".parallax__nav li").forEach((el, index)=>{
el.classList.remove("active");
});
document.querySelector(".parallax__nav li:nth-child("+(index+1)+")").classList.add("active");
}
});
document.querySelectorAll(".parallax__nav li a").forEach(li => {
li.addEventListener("click", (el)=>{
el.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth"
})
})
})
//info scroll
document.querySelector(".scroll span").innerText = parseInt(scrollTop);
document.querySelector(".info .offset1").innerText = document.getElementById("section1").offsetTop;
document.querySelector(".info .offset2").innerText = document.getElementById("section2").offsetTop;
document.querySelector(".info .offset3").innerText = document.getElementById("section3").offsetTop;
document.querySelector(".info .offset4").innerText = document.getElementById("section4").offsetTop;
document.querySelector(".info .offset5").innerText = document.getElementById("section5").offsetTop;
document.querySelector(".info .offset6").innerText = document.getElementById("section6").offsetTop;
document.querySelector(".info .offset7").innerText = document.getElementById("section7").offsetTop;
document.querySelector(".info .offset8").innerText = document.getElementById("section8").offsetTop;
document.querySelector(".info .offset9").innerText = document.getElementById("section9").offsetTop;
window.addEventListener("scroll",()=>{
: window에 스크롤 이벤트를 추가한다. 스크롤이 발생하면 이벤트 핸들러 함수가 실행된다.
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
: 현재 스크롤 위치를 scrollTop 변수에 할당한 후, window.pageYOffset, window.scrollY, document.documentElement.scrollTop 중 어떤 값이든 존재하는 값을 가져온다.
document.querySelectorAll(".parallax__item").forEach((item, index) => {
: .parallax__item 클래스를 가진 모든 요소를 반복하여 순회한다. 각 요소는 item 변수에 할당된다.
if(scrollTop >= item.offsetTop - 2) {
: 현재 스크롤 위치가 item 요소의 offsetTop 값보다 2보다 크거나 같은 경우 아래 코드를 실행한다.
document.querySelectorAll(".parallax__nav li").forEach((el, index)=>{ el.classList.remove("active"); });
: .parallax__nav li 요소들에서 active 클래스를 모두 제거한다.
document.querySelector(".parallax__nav li:nth-child("+(index+1)+")").classList.add("active");
: 현재 item 요소의 인덱스에 해당하는 .parallax__nav li 요소에 active 클래스를 추가한다.
document.querySelectorAll(".parallax__nav li a").forEach(li => {
: .parallax__nav li a 요소를 반복하여 순회합니다. 각 요소는 li 변수에 할당된다.
li.addEventListener("click", (el)=>{
: li 요소에 클릭 이벤트 리스너를 추가합니다. 클릭이 발생하면 아래 코드가 실행된다.
el.preventDefault();
: 이벤트의 기본 동작을 방지한다.
document.querySelector(li.getAttribute("href")).scrollIntoView({behavior: "smooth"})
: 클릭한 링크의 href 속성값으로 이동하며, 부드러운 스크롤 효과를 적용한다.
document.querySelector(".scroll span").innerText = parseInt(scrollTop);
: 현재 스크롤 위치를 .scroll 요소에 표시한다.
document.querySelector(".info .offset1").innerText = document.getElementById("section1").offsetTop;
: 각 섹션의 offsetTop 값을 .info 요소 내 해당 클래스를 가진 요소의 텍스트에 할당한다.