BLOG

土曜日

おはようございます。

タイトルが曜日やとこんなにも楽なんかと実感しておりますどうもハヤトワンです。(ここまできたらもう今週はこのスタイル)

今朝のコーディングはアイアンマン。

https://github.com/HayatoMoromasa/sample/tree/main/ParallaxIronMan

これはGSAP(GreenSock Animation Platform)を使ってアニメーションつけてます。

設定もこれで簡単にできる感じ。

<script>
        gsap.to("#bg", {
            scrollTrigger : {
                scrub: true,
            },
            y: 200,
            scale: 1.5
        })
        gsap.to('#moon', {
            scrollTrigger : {
                scrub: true,
            },
            y: -400,
            scale: 2
        });
        gsap.to('#cloud1', {
            scrollTrigger : {
                scrub: true,
            },
            x: -400,
        });
        gsap.to('#cloud2', {
            scrollTrigger : {
                scrub: true,
            },
            x: 300,
        });
        gsap.to('#jet', {
            scrollTrigger : {
                scrub: true,
            },
            x: 1000,
            y: 200,
            scale: 4
        });
        gsap.to('#ironman', {
            scrollTrigger: {
                scrub: true,
            },
            x: 0,
            y: -1800,
            scale: 1,
            rotate: -50
        });
    </script>

これ多くのサイトで使われてますよね。

掘ればいろいろな表現ができそう。

やってみよもっと。

ということで、

おわり

よいサタデーナイトを