GSAP Parallax Effect03

GSAP scrollTrigger - 배경 고정시키기

section1

section2

section3

section4

section5

section6

section7

section8

section9

소스보기

CSS

javascript

{
    * {
        margin: 0;
        padding: 0;
    }
    a {
        color: #fff;
        text-decoration: none;
    }
    body {
        color: #fff;
        background-color: #111;
        font-family: 'NexonLv1Gothic';
    }
    #parallax__title {
        position: fixed;
        left: 20px;
        top: 20px;
        z-index: 10000;
    }
    #parallax__title h1 {
        font-size: 30px;
        border-bottom: 1px dashed #fff;
        margin-bottom: 10px;
        padding-bottom: 5px;
        font-weight: 400;
        display: inline-block;
    }
    #parallax__title p {
        font-size: 16px;
    }
    #parallax__title ul {
        margin-top: 10px;
    }
    #parallax__title li {
        display: inline;
    }
    #parallax__title li a {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px dashed #fff;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        display: inline-block;
    }
    #parallax__title li.active a {
        background-color: #fff;
        color: #000;
    }
    /* parallax__cont */
    #parallax__cont {
        overflow: hidden;
    }
    .parallax__item {
        width: 100%;
        height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #section2, #section4, #section6, #section8 {
        background-color: #222;
    }
    .parallax__item__num {
        position: absolute;
        right: 20px;
        bottom: 20px;
        font-size: 5vw;
        line-height: 1;
    }
    .parallax__item__img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        background-size: cover;
        background-position: center;
    }
    .parallax__item__img::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0,0,0,0.7);
        z-index: 1;
    }
    #section1 .parallax__item__img {
        background-image: url(img/1-min.jpg);
    }
    #section2 .parallax__item__img {
        background-image: url(img/2-min.jpg);
    }
    #section3 .parallax__item__img {
        background-image: url(img/3-min.jpg);
    }
    #section4 .parallax__item__img {
        background-image: url(img/4-min.jpg);
    }
    #section5 .parallax__item__img {
        background-image: url(img/5-min.jpg);
    }
    #section6 .parallax__item__img {
        background-image: url(img/6-min.jpg);
    }
    #section7 .parallax__item__img {
        background-image: url(img/7-min.jpg);
    }
    #section8 .parallax__item__img {
        background-image: url(img/8-min.jpg);
    }
    #section9 .parallax__item__img {
        background-image: url(img/9-min.jpg);
    }
    .parallax__item__title {
        font-size: 5vw;
        z-index: 100;
        text-transform: uppercase;
        display: inline-block;
    }
 }

{
    // 01. 한개 섹션 고정시키기
    const panel = document.querySelector("#section5");

    ScrollTrigger.create({
        trigger:panel,
        start: "top top",
        pin: true,
        markers: true
    });

    // 02. 여러개 섹션 고정시키기
    gsap.utils.toArray(".parallax__item").forEach((panel,i) => {
        ScrollTrigger.create({
            trigger: panel, 
            start: "top top",
            pin: true,
            pinSpacing: false
        })
    });

    // 03. 스냅 고정 효과 만들기
    let panels = gsap.utils.toArray(".parallax__item");
    let tops = panels.map(panel => ScrollTrigger.create({trigger: panel, start: "top top"}));

    panels.forEach((panel, i) => {
        ScrollTrigger.create({
            trigger: panel,
            start: () => panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom",
            pin: true, 
            pinSpacing: false 
        });
    });

    ScrollTrigger.create({
        snap: {
            snapTo: (progress, self) => {
                let panelStarts = tops.map(st => st.start), 
                snapScroll = gsap.utils.snap(panelStarts, self.scroll()); 
                return gsap.utils.normalize(0, ScrollTrigger.maxScroll(window), snapScroll); 
            },
            duration: 0.5
        }
    });
}