GSAP - 頁面捲動動畫效果 (week4 scrolling challenges June 2020)

gsap-week4-scrolling-challenges-june-2020.markdown

GSAP - 頁面捲動動畫效果 (week4 scrolling challenges June 2020)

利用 GSAP ScrollTrigger Pluging 製作簡單頁面捲動動畫效果

A Pen by RayPan on CodePen.

License.

index.html

<div id="app">
    <div class="section one">
        <div class="bg"></div>
        <h3>ONE</h3>
    </div>
    <div class="section two">
        <div class="bg"></div>
        <h3>TWO</h3>
    </div>
    <div class="section three">
        <div class="bg"></div>
        <h3>THREE</h3>
    </div>
    <div class="section four">
        <div class="bg"></div>
        <h3>FOUR</h3>
    </div>
</div>

script.js

gsap.registerPlugin(ScrollTrigger);
let sections = gsap.utils.toArray(".section");
sections.forEach((section, i) => {
    let text = section.querySelector("h3");

    if (i % 2 === 0) {
        gsap.to(text, {
            scrollTrigger: {
                trigger: text,
                start: "50% 55%",
                toggleActions: "play pause resume reverse"
            },
            keyframes: [
                { left: "-20%", duration: 0 },
                { left: "50%", duration: 0.5 },
                { scale: 2, duration: 0.5 }
            ]
        });
    } else {
        gsap.to(text, {
            scrollTrigger: {
                trigger: text,
                start: "50% 55%",
                toggleActions: "play pause resume reverse"
            },
            keyframes: [
                { left: "120%", duration: 0 },
                { left: "50%", duration: 0.5 },
                { scale: 2, duration: 0.5 }
            ]
        });
    }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script>

style.scss

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
$notoTC: "Noto Sans TC", sans-serif;

*,
*::before,
*::after {
    box-sizing: border-box;
    color: inherit;
    list-style: none;
}
html,
body {
    margin: 0;
    padding: 0;
    font-family: $notoTC;
}
.section {
    width: 100%;
    height: 100vh;
    position: relative;
    flex-shrink: 0;
    overflow-x: hidden;
    h3 {
        margin: 0;
        font-size: 3rem;
        position: absolute;
        top: 50%;
        left: -10%;
        transform: translate(-50%, -50%);
        color: #fff;
        text-shadow: 0.1em 0.1em 5px rgba(0, 0, 0, 0.5);
    }
    .bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
    &.one {
        background-color: #009688;
        .bg {
            background-image: url(https://picsum.photos/1920/1080?random=0);
        }
        p {
            margin: 0;
            position: absolute;
            left: 50%;
            bottom: 40px;
            transform: translateX(-50%);
            &::after,
            &::before {
                content: "";
                display: inline-block;
                width: 10px;
                height: 2px;
                background-color: #000;
                position: absolute;
                left: 39%;
                bottom: -7px;
                transform: rotate(45deg);
                animation: upDown 0.8s infinite;
            }
            &::after {
                left: 47%;
                transform: rotate(-45deg);
            }
        }
    }
    &.two {
        background-color: #f44336;
        .bg {
            background-image: url(https://picsum.photos/1920/1080?random=1);
        }
        h3 {
            left: 110%;
        }
    }
    &.three {
        background-color: #00bcd4;
        .bg {
            background-image: url(https://picsum.photos/1920/1080?random=2);
        }
    }
    &.four {
        background-color: #ff9800;
        .bg {
            background-image: url(https://picsum.photos/1920/1080?random=3);
        }
        h3 {
            left: 110%;
        }
    }
}