스크롤시 패럴렉스 효과의 2번째 예시를 구현해보자!

패럴렉스 이펙트_02 구현하기

스크롤을 내릴때 각 요소의 위치마다 번호에 show를 붙여 해당 속성의 스타일을 불어넣는 에제를 구현해보도록 하겠습니다!

---

동작원리

말로만 설명해드리면 이해가 어려울 수 있기에 하단의 사진을 통해 설명해드리겠습니다.

---

HTML 작성

스크롤을 내릴때마다 선택되는 메뉴를 구현하기 위해 하단의 구조를 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>

---

CSS 작성

간단한 CSS 를 통한 살을 붙여줍니다.

/* parallax__nav */
    #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: 1600px;
        /* background-color: rgba(255, 255, 255, 0.1); */
        margin: 0 auto;
        width: 98%;
    }

    .content__item {
        width: 1000px;
        max-width: 70vw;
        margin: 30vw auto;
        /* background-color: rgba(255, 255, 255, 0.3); */
        text-align: left;
        margin-right: 0;
        position: relative;
        padding-top: 8vw;
    }

    .content__item:nth-child(even) {
        /* 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: -16vw;
        opacity: 0.07;
        z-index: -2;
    }

    .content__item:nth-child(even) .content__item__num {
        right: -5vw;
        left: auto;
        /* left 값 초기화 */
    }

    .content__item__title {
        font-weight: 400;
        text-transform: capitalize;
    }

    .content__item__imgWrap {
        width: 100%;
        padding-bottom: 56.25%;
        background-color: #000;
        position: relative;
        overflow: hidden;
        z-index: -1;
    }

    .content__item__img {
        background: url(../../assets/slider/effect_bg_01.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        /* 내가 작아서 넣음 */
        position: absolute;
        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/slider/effect_bg_01.jpg);
    }

    .content__item:nth-child(2) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_02.jpg);
    }

    .content__item:nth-child(3) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_03.jpg);
    }

    .content__item:nth-child(4) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_04.jpg);
    }

    .content__item:nth-child(5) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_05.jpg);
    }

    .content__item:nth-child(6) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_06.jpg);
    }

    .content__item:nth-child(7) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_07.jpg);
    }

    .content__item:nth-child(8) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_08.jpg);
    }

    .content__item:nth-child(9) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_09.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;
    }

    #parallax__info {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 2000;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 20px;
        border-radius: 10px;
    }

    #parallax__info li,
    .scrollTop {
        line-height: 1.4;
    }

    @media (max-width: 800px) {
        #parallax__cont {
            margin-top: 70vw;
        }

        #parallax__nav {
            padding: 10px;
            right: auto;
            left: 10px;
            top: 10px;
            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;
        }

        #parallax__info {
            left: 10px;
            bottom: 10px;
        }
    }

---

JS : 패럴렉스 이펙트 핵심

자세한 설명은 상단의 사진을 통해 설명을 드렸으나 중요한 부분만 짚어드리자면,

.preventDefault() 를 통해 단순 클릭으로 해당 id값으로 틱! 이동해버리는 이벤트 발생을 막고
스크롤을 내릴때마다 ".active" 클래스를 주는 기준은 "ScrollTop >= e.offsetTop - window.innerHeight" 조건으로 주어야 하는데
이 의미는 scrollTop의 값이 ".content__item" 클래스 요소의 오프셋 탑보다 클때 ".active" 클래스를 지우는 조건이 중요합니다.

document.querySelectorAll("#parallax__dot a").forEach(el => { //#parallax__dot a 
    el.addEventListener("click", e=> {                        //요소를 클릭했을때
        e.preventDefault();                                   //이벤트가 발생했을때 걸려있는 링크 이동을 차단 시킴

         // 이 한줄이 핵심
        document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"}); // 요소의 속성 href를 가져와 클릭이 되었을때 행동은 smooth
    })
})

window.addEventListener("scroll",  () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    document.querySelector("#parallax__info span").innerText = Math.floor(scrollTop);

    document.querySelectorAll(".content__item").forEach((e,i)=>{
        if(scrollTop >= e.offsetTop - window.innerHeight){ // scrollTop 값이 e의 오프셋 탑 값보다 크다면
            document.querySelectorAll("#parallax__dot li").forEach(li => {
                li.classList.remove("active");
            });
        document.querySelector("#parallax__dot li:nth-child("+(i+1)+")").classList.add("active");
        }
    })
})

---

완성예제

참으로 길고 긴 시간이였네요 ^_^.. 완성하고 나니 참 뿌듯하네요 그쵸?

---

원본 소스 보기

원본 페이지 보기