Parallax Effect05

728x90

Parallax Effect05

스크롤을 내렸을 때 숫자나, 이미지, 안의 글귀등에게 이질감을 주는 이펙트를 공부하였습니다.

01. HTML

기본적으로는 4번 유형과 같지만, 이해를 돕기 위해 스크롤 탑을 추가하였습니다.

🐇 HTML 코드

<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"> 성공 그 자체에 파멸의 불씨가 들어 있을지도 모른다 </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>
<!-- // parallax__cont -->

<aside id="parallax__info">
    <div class="scroll">scrollTop : <span>0</span> px </div>
</aside>

02. Css

바뀐 곳은 거의 없으나, 이질감만 주기엔 심심해서 hover하였을 때 색이 돌아오는 모습을 추가했습니다.

🐇 css 코드

 .content__item__img {
    position: absolute;
    width: 110%;
    height: 110%;
    left: -5px;
    top: -5px;
    background-image: url(../../assets/silde/min_jelly/slide_main_07-min.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover ;
    filter: saturate(0%);
    transition: all 1s;
    /* transition: all 1s; */
}

.content__item:hover .content__item__img {
    filter: saturate(80%);
}

03. Javascript

gsap를 이용하여 애니메이션 효과를 좀 더 추가하며, offsetTop을 이용해 시야의 이질감을 주었습니다.

🐇 Javascript 코드

function scroll(){
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.screenY;

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

    document.querySelectorAll(".content__item").forEach(item => {
        const target1 = item.querySelector(".content__item__img");
        const target2 = item.querySelector(".content__item__desc");
        const target3 = item.querySelector(".content__item__num");

        let offset1 = (scrollTop - item.offsetTop) * 0.1;  //scrollTop - 섹션의 offsetTop 을 주었으나, 너무 크므로 0.1을 곱한다.
        let offset2 = (scrollTop - item.offsetTop) * 0.15; 
        let offset3 = (scrollTop - item.offsetTop) * 0.2; 

        // target1.style.transform = `translateY(${offset}px)`;
        // target2.style.transform = `translateX(${offset2}px)`;

        gsap.to(target1, {duration : .3, y : offset1, ease : "power4.out"});
        gsap.to(target2, {duration : .3, y : offset2});
        gsap.to(target3, {duration : .3, x : offset3, ease : "expo.out"});
    })

    requestAnimationFrame(scroll);
}
scroll();