728x90
반응형

 

완성 화면

 

 

 

 

 

코드 보기 / 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 요소 내 해당 클래스를 가진 요소의 텍스트에 할당한다.

+ Recent posts