퍼럴랙스 이펙트 05

패럴랙스 이펙트 05 - 이질감 효과

원본 페이지 보기

원본 소스 보기

---

script 코드

스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다.

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

 function scroll(){
            let scrollTop = window.pageXOffset || 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;
                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, y: offset3, ease: "expo.out"})
            });
            requestAnimationFrame(scroll);
        }
        scroll();

---

CSS

코드 보기

/* .parallax__nav */
        #parallax__nav {
            position: fixed;
            right: 20px;
            top: 20px;
            z-index: 20000;
            background-color: rgba(0, 0, 0, 0.4);
            padding: 20px 30px;
            border-radius: 50px;
            transition: top .4s ease;
        }

        #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;
            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.3); */
            text-align: left;
            margin-right: 0;
            position: relative;
            padding-top: 7vw;
        }

        /*  .content__item 의 짝수만 선택 even , 2n = +,* 가능 */
        .content__item:nth-child(even) {
            margin-left: 0;
            text-align: right;
        }

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

        .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__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: url(../assets/img3/effect_bg01-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/img3/effect_bg01-min.jpg);
        }

        .content__item:nth-child(2) .content__item__img {
            background-image: url(../assets/img3/effect_bg02-min.jpg);
        }

        .content__item:nth-child(3) .content__item__img {
            background-image: url(../assets/img3/effect_bg03-min.jpg);
        }

        .content__item:nth-child(4) .content__item__img {
            background-image: url(../assets/img3/effect_bg04-min.jpg);
        }

        .content__item:nth-child(5) .content__item__img {
            background-image: url(../assets/img3/effect_bg05-min.jpg);
        }

        .content__item:nth-child(6) .content__item__img {
            background-image: url(../assets/img3/effect_bg06-min.jpg);
        }

        .content__item:nth-child(7) .content__item__img {
            background-image: url(../assets/img3/effect_bg07-min.jpg);
        }

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

        #parallax__info {
            position: fixed;
            left: 20px;
            bottom: 20px;
            z-index: 2000;
            background: rgba(0, 0, 0, 0.4);
            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;
                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;
            }
        }

---

HTML

코드 보기

<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>
    <!-- section -->


    <section id="section2" class="content__item">
        <span class="content__item__num">02</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>
    <!-- section2 -->


    <section id="section3" class="content__item">
        <span class="content__item__num">03</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>
    <!-- section3 -->


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

    <section id="section5" class="content__item">
        <span class="content__item__num">05</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>
    <!-- section5 -->


    <section id="section6" class="content__item">
        <span class="content__item__num">06</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>
    <!-- section6 -->


    <section id="section7" class="content__item">
        <span class="content__item__num">07</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>
    <!-- section7 -->


    <section id="section8" class="content__item">
        <span class="content__item__num">08</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>
    <!-- section8 -->
</div>