패럴랙스 이펙트 -01

HTML

<main id="main">
        <div id="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 -->
        </div>
    </main>
    <!-- //main -->

    <aside class="parallax__info">
        <div class="scroll">scrollTop : <span>0</span>px</div>
        <div class="info">
            <ul>
                <li>#section1 offset() : <span class="offset1">0</span>px</li>
            </ul>
        </div>
    </aside>

이것은 HTML 코드입니다. "parallax__wrap"이라는 ID를 가진 main 요소가 있으며,여러 섹션(section1 ~ section9)으로 구성되어 있습니다.

각 섹션에는 "parallax__item"이라는 클래스가 지정되어 있으며, 각각의 섹션에는 번호, 제목, 이미지, 설명이 포함되어 있습니다.

또한 "parallax__info"라는 클래스가 지정된 사이드바도 있습니다. 이 사이드바에는 현재 스크롤 위치가 표시되고, 몇 가지 추가 정보가 있습니다.

CSS

코드보기

GitHub - dkseho9121/web2023: 수업시간에 배운 사이트입니다.

이 CSS 코드는 웹페이지 디자인을 위한 스타일시트입니다. 코드는 각 요소별로 선택자와 스타일을 정의하고 있습니다.

헤더, 푸터, 그리고 스크롤 내용을 담고 있는 파랄랙스 영역의 스타일을 정의하고 있습니다.

이 코드에서는 position, margin, padding, width, height, color 등 다양한 스타일 속성이 사용되었습니다. 각 속성의 값은 픽셀(px), 백분율(%), rgba 값을 사용하여 지정되어 있습니다.

또한 transition, filter, z-index 등 다양한 효과와 속성이 적용되어 있습니다. 이 코드를 이용하여 다양한 스타일을 적용하여 웹페이지를 디자인할 수 있습니다.

Javascript

<script>
        // 선택자
        const parallaxInfo = document.querySelector(".parallax__info");
        const scroll = parallaxInfo.querySelector(".scroll span");
        const offset = parallaxInfo.querySelectorAll(".info span");
        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((li) => {
                        li.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",(e) => {
                    e.preventDefault();
                    document.querySelector(li.getAttribute("href")).scrollIntoView({
                        behavior: "smooth"
                    })
                })
            })

            //info
            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;
            
        });
    </script>

해당 코드는 웹페이지에서 스크롤이 발생할 때 발생하는 이벤트를 처리하기 위한 JavaScript 코드입니다.

선택한 HTML 요소들을 참조하여, 스크롤 위치에 따라 해당 위치와 관련된 내용을 화면에 표시하거나, 스크롤 위치에 따라 다른 요소들을 활성화시키는 등의 동작을 수행합니다.

또한, 페이지 내비게이션 메뉴를 클릭했을 때 해당 메뉴에 해당하는 섹션으로 부드러운 스크롤링 효과를 주는 기능도 포함되어 있습니다.