패럴랙스 이펙트 만들기 01

페럴랙스 이펙트

자바스크립트를 이용한 페럴랙스 효과 만들기 입니다.

---

페럴랙스 이펙트 01 - 메뉴 이동 따라다니기

스크롤의 위치에 따라 메뉴에 효과를 주거나 메뉴 클릭시 해당 위치로 자연스럽게 이동하는 효과입니다.

---

▶ HTML 및 CSS 파트

//CSS
<style>
#parallax__nav {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 2000;
    background-color: rgba(0,0,0,0.4);
    padding: 20px 30px;
    border-radius: 50px;
}
#parallax__nav li {
    display: inline;
    margin: 0 5px;
}
#parallax__nav li a {
    display: inline-block;
    height: 30px;
    padding: 5px 20px;
    text-align: center;
    line-height: 30px;
}
#parallax__nav li.active a {
    background: #fff;
    color: #000;
    border-radius: 20px;
    box-sizing: content-box; /*박스사이징-보더박스를 푸는 방법*/
}
#parallax__cont {
    max-width: 1500px;
    width: 98%;
    margin: 0 auto;
    /* background-color: rgba(255,255,255,0.1); */
}

.content__item {
    width: 1000px;
    max-width: 70vw;
    margin: 30vw auto;
    /* background-color: rgba(255,255,255,0.1); */
    text-align: left;
    margin-right: 0;
    position: relative;
    padding-top: 15vw;
}
.content__item:nth-child(2n) {  /*짝수만 선택하는 방법 even이라 적어도 된다.*/
    margin-left: 0;
    text-align: right;
}

.content__item__num {
    font-size: 35vw;
    font-family: "Lato";
    font-weight: 100;
    position: absolute;
    left: -5vw;
    top: -7vw;
    opacity: 0.07;
    z-index: -2;
}
.content__item:nth-child(even) .content__item__num {
    left: auto;     /*레프트값 초기화*/
    right: -5vw;
}
.content__item__title {
    font-weight: 400;
    text-transform: capitalize; /*첫글자만 대문자로 바꾸는 방법*/
}
.content__item__imgWrap {
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    position: relative;
    overflow: hidden;
    z-index: -1;
}
.content__item__img {
    position: absolute;
    /* background-image: url(../assets/img/effect_bg05-min.jpg); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 110%;
    height: 110%;
    left: -5%;
    top: -5%;
    filter: saturate(0%);   /*흑백효과*/
    transition: all 1s;
}
.content__item:nth-child(1) .content__item__img {
    background-image: url(../assets/img/effect_bg01-min.jpg);
}
.content__item:nth-child(2) .content__item__img {
    background-image: url(../assets/img/effect_bg02-min.jpg);
}
.content__item:nth-child(3) .content__item__img {
    background-image: url(../assets/img/effect_bg03-min.jpg);
}
.content__item:nth-child(4) .content__item__img {
    background-image: url(../assets/img/effect_bg04-min.jpg);
}
.content__item:nth-child(5) .content__item__img {
    background-image: url(../assets/img/effect_bg05-min.jpg);
}
.content__item:nth-child(6) .content__item__img {
    background-image: url(../assets/img/effect_bg06-min.jpg);
}
.content__item:nth-child(7) .content__item__img {
    background-image: url(../assets/img/effect_bg07-min.jpg);
}
.content__item:nth-child(8) .content__item__img {
    background-image: url(../assets/img/effect_bg08-min.jpg);
}
.content__item:nth-child(9) .content__item__img {
    background-image: url(../assets/img/effect_bg09-min.jpg);
}

.content__item__desc {
    font-size: 4vw;
    line-height: 1.4;
    margin-top: -5vw;
    margin-left: -4vw;
    word-break: keep-all;
}
.content__item:nth-child(even) .content__item__desc {
    margin-left: auto;
    margin-right: -4vw;
}
#parallex__info {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2000;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}
#parallex__info li, .scroll {
    line-height: 1.4;
}


@media (max-width: 800px){
    #parallax__cont {
        margin-top: 70vw;
    }
    #parallax__nav {
        padding: 10px;
        right: auto;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 5px;
        background-color: rgba(0,0,0,0.8);
    }
    #parallax__nav li {
        display: block;
        margin: 5px;
    }
    #parallax__nav li a {
        font-size: 14px;
        padding: 5px;
        border-radius: 5px;
        height: auto;
        line-height: 1;
    }
    #parallax__nav li.active a {
        border-radius: 5px;
    }
    #parallex__info {
        left: 10px;
        bottom: 10px;
    }
}
</style>


//HTML
<nav id="parallax__nav">
    <ul>
        <li class="active"><a href="#section1">메뉴1</a></li>
        <li><a href="#section2">메뉴2</a></li>
        <li><a href="#section3">메뉴3</a></li>
        <li><a href="#section4">메뉴4</a></li>
        <li><a href="#section5">메뉴5</a></li>
        <li><a href="#section6">메뉴6</a></li>
        <li><a href="#section7">메뉴7</a></li>
        <li><a href="#section8">메뉴8</a></li>
        <li><a href="#section9">메뉴9</a></li>
    </ul>
</nav>
<!-- parallax__nav -->

<main id="parallax__cont">
    <div id="contents">
        <section id="section1" 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>
        <!-- section1 -->

        <section id="section2" 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>
        <!-- section2 -->

        <section id="section3" 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">1퍼센트의 가능성, 그것이 나의 길이다.</p>
        </section>
        <!-- section3 -->

        <section id="section4" 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>
        <!-- section4 -->

        <section id="section5" 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>
        <!-- section5 -->

        <section id="section6" 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>
        <!-- section6 -->

        <section id="section7" 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>
        <!-- section7 -->

        <section id="section8" 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>
        <!-- section8 -->

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

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

이번 효과는 메뉴를 클릭 시 해당 위치에 있는 이미지로 부드럽게 이동하며, 위치에 따라 메뉴의 색이 활성화됩니다.
따라서 3개의 영역으로 나뉘게 되며, 세로로 여러개의 사진이 나열되어야 하고 이미지 갯수만큼 메뉴 버튼을 만들어야 합니다.

aside 영역은 스크립트로 각 이미지의 좌표값과 스크롤의 좌표값을 나타내기 위한 틀입니다.
스크롤 좌표값과 이미지의 좌표값을 비교해 위치에 따라 효과를 주게 됩니다.

▶ JAVASCRIPT 파트

Step1. 스크롤 좌표값 표현

const scroll = document.querySelector("#parallex__info .scroll span");
window.addEventListener("scroll", () => {
        // let scrollTop = window.pageYOffset;
        // let scrollTop = window.scrollY;
        // let scrollTop = document.documentElement.scrollTop;     /*셋 다 화면의 스크롤 위치 좌표를 표시해줌. 브라우저에 따라 되는 것이 있고 안되는 것이 있다.*/
        let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;     //이런식으로 3가지를 다 써서 모든 브라우저에 적용되게 함 
    });

※ 스크롤 동적 처리 속성

window.pageYOffset
window.scrollY
document.documentElement.scrollTop

위의 세가지 속성은 웹문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다.

하지만 각각 특정 브라우저에서 동작이 안할 수 있어 3가지를 동시에 쓰는데,
"window.pageYOffset || window.scrollY || document.documentElement.scrollTop" 형태로 사용할 수 있습니다.

Step2. 이미지 좌표값 표현

    const scroll = document.querySelector("#parallex__info .scroll span");
    window.addEventListener("scroll", () => {
        let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;     //이런식으로 3가지를 다 써서 모든 브라우저에 적용되게 함 
    
        // info
        document.querySelector(".scroll span").innerText = Math.round(scrollTop);   //Math.round() : 값을 반올림 해줌
        
        // document.querySelector(".offset1").innerText = document.getElementById("section1").offsetTop;
        // document.querySelector(".offset2").innerText = document.getElementById("section2").offsetTop;
        // document.querySelector(".offset3").innerText = document.getElementById("section3").offsetTop;
        // document.querySelector(".offset4").innerText = document.getElementById("section4").offsetTop;
        // document.querySelector(".offset5").innerText = document.getElementById("section5").offsetTop;
        // document.querySelector(".offset6").innerText = document.getElementById("section6").offsetTop;
        // document.querySelector(".offset7").innerText = document.getElementById("section7").offsetTop;
        // document.querySelector(".offset8").innerText = document.getElementById("section8").offsetTop;
        // document.querySelector(".offset9").innerText = document.getElementById("section9").offsetTop;

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

스크립트를 통해 좌표값이 표시될 aside 구역에 각 이미지에 부여한 아이디 값을 넣고 offsetTop으로 각 이미지의 좌표값을 표시합니다.

offsetTop은 요소의 Y축 좌표값을 표현해주며, offsetLeft는 X축 좌표값을 나타냅니다. 이 값은 문서를 기준으로 합니다.

9개의 이미지가 반복되어야 하기에 for문으로 처리하였습니다.

※ 수학 메서드

Math.round( ) : 요소의 값을 반올림 해주는 메서드
Math.floor( ) : 요소의 값을 버림 해주는 메서드
Math.ceil( ) : 요소의 값을 올림 해주는 메서드
Math.max( ) : 요소의 가장 큰 값을 나타내는 메서드
Math.min( ) : 요소의 가장 작은 값을 나타내는 메서드
Math.abs( ) : 요소의 절대값을 나타내는 메서드
Math.trulc( ) : 요소의 정수값만 나타내는 메서드
Math.random( ) : 요소의 랜덤 값(0-1사이의 난수)을 나타내는 메서드

Step3. 메뉴와 이미지 매칭

window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;     //이런식으로 3가지를 다 써서 모든 브라우저에 적용되게 함 

    // if(scrollTop >= document.getElementById("section1").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(1)").classList.add("active");
    // };
    // if(scrollTop >= document.getElementById("section2").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(2)").classList.add("active");
    // };
    // if(scrollTop >= document.getElementById("section3").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(3)").classList.add("active");
    // };
    // if(scrollTop >= document.getElementById("section4").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(4)").classList.add("active");
    // };
    // if(scrollTop >= document.getElementById("section5").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(5)").classList.add("active");
    // };
    // if(scrollTop >= document.getElementById("section6").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(6)").classList.add("active");
    // };
    // if(scrollTop >= document.getElementById("section7").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(7)").classList.add("active");
    // };
    // if(scrollTop >= document.getElementById("section8").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(8)").classList.add("active");
    // };
    // if(scrollTop >= document.getElementById("section9").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     });
    //     document.querySelector("#parallax__nav li:nth-child(9)").classList.add("active");
    // };


    //for
    // for(let i=1; i<=9; i++){
    //     if(scrollTop >= document.getElementById("section"+i).offsetTop){
    //         document.querySelectorAll("#parallax__nav li").forEach(li => {
    //             li.classList.remove("active");
    //         });
    //         document.querySelector("#parallax__nav li:nth-child("+i+")").classList.add("active");
    //     };
    // }
    //forEach
    document.querySelectorAll(".content__item").forEach((element, index) =>{
        if(scrollTop >= element.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");
        };
    });
    // info
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);   //Math.round() : 값을 반올림 해줌

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

if문을 이용해 스크롤 위치값이 이미지의 위치값과 크거나 같을 때, 즉 스크롤이 이미지 위치로 이동했을 때 이미지에 맞는 해당 메뉴에만 효과를 주는 방법입니다.

스크롤이 각 이미지에 도달했을 때 클래스를 부여해 효과를 발동시키는데, 한번 지날 때 부여된게 지속되기 때문에 각 이미지를 지나갈 때 전체 이미지의 효과를 주는 클래스를 제거하고 그 다음 해당 이미지에만 클래스를 부여해 해당 메뉴에만 효과가 부여하도록 합니다.

이 작업을 이미지 수 만큼 반복해야 하기에 for문 혹은 forEach문으로 반복문을 처리하면 코드를 간단하게 줄일 수 있습니다.

Step4. 메뉴 클릭 시 부드럽게 이동하는 효과

window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;     //이런식으로 3가지를 다 써서 모든 브라우저에 적용되게 함 

    document.querySelectorAll(".content__item").forEach((element, index) =>{
        if(scrollTop >= element.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");
        };
    });

    // info
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);   //Math.round() : 값을 반올림 해줌

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

//스크롤 이동
document.querySelectorAll("#parallax__nav li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"  //부드럽게 움직이도록 해줌
        });
    });
});

메뉴를 클릭 시 해당 위치로 이동하는 방법은 html의 a태그 href를 사용해 구현할 수 있습니다. 하지만 이런 방식은 곧바로 이동할 뿐 애니메이션을 주듯 부드러운 움직임을 구현하지 않습니다.
그래서 스크립트를 통해 움직임을 구현합니다.

※ scrollIntoView( )

element.scrollIntoView( ) : 특정 요소 위치로 화면 스크롤을 이동시키는 메서드
- behavior : 전환 애니메이션을 정의 (smooth : 부드럽게 이동)

scrollIntoView( )는 스크롤의 위치를 이동시키는 메서드 입니다. 이 때 몇가지 효과를 줄 수 있는데 "behavior: smooth"를 사용 시 스크롤이 위아래로 부드럽게 이동하게 됩니다.

※ preventDefault( )

event.preventDefault( ) : 특정 이벤트의 발생을 막아주는 메서드

preventDefault( )는 <a> 태그나 <submit> 태그 같은 몇몇 특정 기능을 갖는 태그의 효과를 비활성화 시켜줍니다.
본문에선 메뉴에 <a> 태그가 주어져 있으므로 스크립트와 충돌이 나지 않게 preventDefault( ) 메서드로 비활성화 했습니다.

원본 소스 보기