패럴랙스 이펙트 05

페럴랙스 이펙트

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

---

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

스크롤바 위치에 따라 텍스트와 이미지 등이 서로 다르게 움직여 이질감이 느껴지게 하는 효과입니다.

▶ 코드

이질감 효과는 스크롤 좌표값에 오프셋 좌표값을 뺀 값에 약간의 조정을 한 값을 각 컨텐츠에 적용합니다.
스크롤 좌표값과 오프셋 좌표값은 화면에 보이는 좌표값이기 때문에 거의 같아 빼면 0에 가깝게 되지만 오차가 항상 발생해 0이 되진 않습니다.

//CSS 코드
#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;
    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: 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;
    }
}

//자바스크립트 코드
function scroll(){
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    document.querySelector("#parallex__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에 가깝게 된다.
        let offset2 = (scrollTop - item.offsetTop) * 0.15;
        let offset3 = (scrollTop - item.offsetTop) * 0.2;   

        // target1.style.transform = `translateY(${offset1}px)`;    //스크롤값이 증가할 때마다 되면 변수(이미지, 글자 등)에 증가한 값의 0.1~0.2를 곱한 값의 픽셀을 부여해 이동시킴
        // target2.style.transform = `translateX(${offset2}px)`;

        //gsap로 사용
        gsap.to(target1, {duration: .3, y: offset1, ease: "power4.out"});
        gsap.to(target2, {duration: .5, y: offset2});
        gsap.to(target3, {duration: .5, y: offset3});
    });

    requestAnimationFrame(scroll);
}
scroll();

스크롤값과 오프셋값을 뺀 값에 px를 붙여 각 컨텐츠에 css효과를 넣으면 간단하게 끝이 납니다.
px값이 마우스의 좌표값에 따라 실시간으로 반영되기 때문에 컨텐츠의 효과 역시 실시간으로 실행됩니다.

※ requestAnimationFrame( )

1초에 60번 실행하도록 제한을 두고 실행시키는 속성입니다.

이 속성은 재귀 함수 같이 실행 시 무한으로 실행하거나 초당 너무 많이 실행해 페이지에 부담이 되는 상황일 때 부여해 적당한 실행 횟수로 제한할 수 있도록 해줍니다.

애니메이션을 구현할 때 자주 사용하며, 브라우저가 스택오버플로우가 일어나지 않도록 해줄때도 자주 사용합니다.

완성 형태

원본 소스 보기