본문 바로가기
Effect/Parallax Effect

패럴랙스 이펙트01

by 코딩 척척학사 2022. 9. 6.
728x90

패럴랙스 이펙트

패럴랙스 이펙트는 페이지에서 스크롤을 내림에따라 이미지가 보여지거나 애니메이션이 실행되는 등, 스크롤 값을 이용한 효과입니다.

HTML 코드

패럴랙스 이펙트와 관련된 HTML 부분입니다.

HTML 보기 
<nav id="parallax__nav">
    <ul>
        <li class="active"><a href="#section01">메뉴1</a></li>
        <li><a href="#section02">메뉴2</a></li>
        <li><a href="#section03">메뉴3</a></li>
        <li><a href="#section04">메뉴4</a></li>
        <li><a href="#section05">메뉴5</a></li>
        <li><a href="#section06">메뉴6</a></li>
        <li><a href="#section07">메뉴7</a></li>
        <li><a href="#section08">메뉴8</a></li>
        <li><a href="#section09">메뉴9</a></li>
    </ul>
</nav>
<!-- parallax__nav -->

<main id="parallax__cont">
    <div id="contents">
        <section id="section01" class="content__item">
            <span class="content__item__num">01</span>
            <h2 class="content__item__title">section1</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다.</p>
        </section>
        <!-- //section01 -->

        <section id="section02" class="content__item">
            <span class="content__item__num">02</span>
            <h2 class="content__item__title">section2</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">지혜는 듣는 데서 오고 후회는 말하는 데서 온다.</p>
        </section>
        <!-- //section02 -->
        
        <section id="section03" class="content__item">
            <span class="content__item__num">03</span>
            <h2 class="content__item__title">section3</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">모든 날 중 가장 완전히 잃어버린 날은 웃지 않는 날이다.</p>
        </section>
        <!-- //section03 -->
        
        <section id="section04" class="content__item">
            <span class="content__item__num">04</span>
            <h2 class="content__item__title">section4</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">열의 없이 성취 된 위업이란 아직 하나도 없다.</p>
        </section>
        <!-- //section04 -->
        
        <section id="section05" class="content__item">
            <span class="content__item__num">05</span>
            <h2 class="content__item__title">section5</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">절제는 모든 진주 고리를 이어주는 비단의 실이다.</p>
        </section>
        <!-- //section05 -->
        
        <section id="section06" class="content__item">
            <span class="content__item__num">06</span>
            <h2 class="content__item__title">section6</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">기회는 새와 같은 것 날아가기 전에 꼭 잡아야 한다.</p>
        </section>
        <!-- //section06 -->
        
        <section id="section07" class="content__item">
            <span class="content__item__num">07</span>
            <h2 class="content__item__title">section7</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">요구받기 전에 충고하지 말라.</p>
        </section>
        <!-- //section07 -->
        
        <section id="section08" class="content__item">
            <span class="content__item__num">08</span>
            <h2 class="content__item__title">section8</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아간다.</p>
        </section>
        <!-- //section08 -->
        
        <section id="section09" class="content__item">
            <span class="content__item__num">09</span>
            <h2 class="content__item__title">section9</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">몸가짐은 각자가 자기의 모습을 비추는 거울이다.</p>
        </section>
        <!-- //section09 -->
        
    </div>
</main>
<!-- main -->

<aside id="parallax__info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
    <div class="info">
        <ul>
            <li>section1 offset() : <span class="offset1">0</span></li>
            <li>section2 offset() : <span class="offset2">0</span></li>
            <li>section3 offset() : <span class="offset3">0</span></li>
            <li>section4 offset() : <span class="offset4">0</span></li>
            <li>section5 offset() : <span class="offset5">0</span></li>
            <li>section6 offset() : <span class="offset6">0</span></li>
            <li>section7 offset() : <span class="offset7">0</span></li>
            <li>section8 offset() : <span class="offset8">0</span></li>
            <li>section9 offset() : <span class="offset9">0</span></li>
        </ul>
    </div>
</aside>

스크립트 요약

1. window.addEventListener("scroll", ()=>{});메서드를 이용해 스크롤 하는 이벤트를 발생시킵니다.
2. pageYOffset, scrollY, scrollTop 속성을 이용해 변수에 페이지의 스크롤 값을 불러와 저장합니다.
3. 변수에 페이지의 스크롤 값을 저장합니다.
4. offsetTop 속성을 이용해 요소의 좌푯값을 구하고, 요소의 좌푯값과 스크롤 값을 비교하여 메뉴 버튼을 활성화합니다.

전체 스크립트 보기 
const scroll = document.querySelector("#parallax__info .scroll span");
window.addEventListener("scroll", ()=>{
    //let scrollTop = window.pageYOffset;
    //let scrollTop = window.scrollY;
    //let document.documentElement.scrollTop;
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    
    // forEach
    document.querySelectorAll(".content__item").forEach((element, index)=>{
        if(scrollTop >= element.offsetTop -3){
            document.querySelectorAll("#parallax__nav li").forEach(li => {
                li.classList.remove("active");
            });
            document.querySelector("#parallax__nav li:nth-child("+(index+1)+")").classList.add("active");
        }
    });

    //info
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);
    
    for(let i=1; i<=9; i++){
        document.querySelector(".offset"+i).innerText = document.getElementById("section0"+i).offsetTop+"px";
    }
});

//스크롤 이동
document.querySelectorAll("#parallax__nav li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"
        });
    });
});

스크립트 뜯어보기

스크립트를 차근차근 뜯어보며 이해해 봅시다!

> 선택자 만들기 : 요소의 offsetTop 값을 구해 삽입할 span태그를 선택하여 scroll 변수 안에 저장합니다. 

const scroll = document.querySelector("#parallax__info .scroll span")

> 이벤트 메서드 작성하기 : 패럴랙스는 스크롤 이벤트 발생에 따른 애니메이션 효과 등을 말합니다. 화면상에서의 이벤트 발생을 가져오기 위해, 대상 요소는 window로 합니다. 

window.addEventListener("scroll", ()=>{
    …
});

> 함수 실행문 작성하기 : 스크롤 값(데이터) 불러오기. scrollTop 변수에 페이지의 스크롤 값을 불러와 저장합니다. 

//let scrollTop = window.pageYOffset;
//let scrollTop = window.scrollY;
//let document.documentElement.scrollTop;
//위의 세가지 코드는 모두 같은 값을 가져옵니다. 대상의 스크롤 값(문서 기준, y좌표값)
//브라우저에서의 호환성을 고려하기 위해, or연산자( || )를 이용해 세가지 모두 작성해줍니다!

let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

> 함수 실행문 작성하기 : 스크롤 값이 요소의 offset 값보다 크거나 같으면 스크롤이 해당 섹션에 도달하지 못한 것이므로, 메뉴의 클래스에서 active를 삭제합니다.
그리고 도달한 요소는 index+1 번째 li요소와 같으므로, 변수를 사용하여 해당 요소를 선택한 후, 클래스에 active를 추가해 활성화 시켜줍니다. 

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

> 함수 실행문 작성하기 : 앞서 선택한 span 태그 안에 scrollTop 값과 offsetTop 값을 넣어줍니다. Math.round() 메서드는 값을 반올림하여 줍니다. 

document.querySelector(".scroll span").innerText = Math.round(scrollTop);

for(let i=1; i<=9; i++){
    document.querySelector(".offset"+i).innerText = document.getElementById("section0"+i).offsetTop+"px";
}

> 메뉴 선택 이동 효과 주기 : 각 메뉴를 클릭했을 때, 해당 섹션으로 이동하도록 하는 스크립트입니다.
preventDefault() 메서드는 요소를 클릭했을 때, 맨 위로 스크롤되는 이벤트가 발생하지 않도록 합니다.
scrollIntoView() 메서드는 스크롤이 이동하는 동안의 움직임 효과를 설정할 수 있습니다. 

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

> 완성 페이지 보기

원본 소스 보기
728x90

'Effect > Parallax Effect' 카테고리의 다른 글

패럴랙스 이펙트06  (4) 2022.09.29
패럴랙스 이펙트05  (8) 2022.09.20
패럴랙스 이펙트04  (2) 2022.09.18
패럴랙스 이펙트03  (7) 2022.09.10
패럴랙스 이펙트02  (3) 2022.09.10

관련글

댓글

HTML이 적힌 썸네일 이미지

HTML

자세히 보기
CSS가 적힌 썸네일 이미지

CSS

자세히 보기
JAVASCRIPT가 적힌 썸네일 이미지

JAVASCRIPT

자세히 보기

티스토리툴바