나의 Parallax 적용기.. [GSAP 사용]

남들은 모두 쉽게 적용하는 parallax (img, text 말고 section 단위 적용)

만날 수 있는 모든 오류를 만난 후 겨우 적용한 것 같다.

 

HTML 코드:

<div class="content1 z2">
</div>

<div class="parallax-body z1">
    <div class="px-title01-div">
        <p class="main-title px-title01">Parallax Scroll</p>
    </div>
    <img class="parallax-01 z-50" src="/scroll/img/dna-img.jpg">
</div>

<div class="content2 z1">
</div>

JS (GSAP) :

gsap.to(".parallax-01", {
    yPercent: 100,
    ease: "none",
    scrollTrigger: {
        trigger: ".parallax-01",
        scrub: true
    }, 
});

CSS :

.parallax-body {
    position: relative;
    height: 75vh;
    width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
}
.parallax-01 {
    width: 100%;
    min-width: 1300px;
    transform: scale(1.5);
    display: block;
    position: relative;
    top: -40vh;
}
.px-title01-div {
    left: 50%;
    top: 30%;
    transform: translate(-50%, 0);
    text-align: center;
    position: absolute;
}
.parallax-body .main-title {
    color: white;
    font-size: 70px;
    text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.23);
    
}