'GSAP Hari ke-1: Animasi Tatal Interaktif dengan Anak Panah Berputar'-tutorial js-php.cn

'GSAP Hari ke-1: Animasi Tatal Interaktif dengan Anak Panah Berputar'

Linda Hamilton

Lepaskan： 2024-12-17 12:25:23

asal

902 orang telah melayarinya

pengenalan

? Helo Pembangun!

Selamat datang ke Hari 7 GSAP Journey saya, tempat saya meneroka kemungkinan animasi yang tidak terhingga di web. Hari ini, saya menyahut cabaran untuk mencipta animasi marquee berasaskan skrol interaktif yang menampilkan teks dinamik dan anak panah berputar.

Dengan alatan animasi GSAP yang berkuasa, kami akan membuat halaman bertindak balas kepada arah tatal pengguna—atas atau bawah—dengan pergerakan dan putaran yang lancar. Mari selami!

Apa Yang Kami Bina ?️

Animasi kami akan merangkumi:

Rangka tatal teks dan imej.
Animasi responsif yang melaraskan berdasarkan arah tatal.
Pusing anak panah untuk menambah bakat!

Anda boleh melihat demo langsung di sini.

Struktur HTML

Berikut ialah penanda HTML ringkas yang saya gunakan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day-7 Scrolling Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>




<hr>


<hr>

<h3>
  
  
  JavaScript Animation with GSAP
</h3>

<p>Here’s the GSAP-powered JavaScript code that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});

Salin selepas log masuk

Cara Ia Berfungsi ⚙️

Pendengar Acara: Tetingkap.addEventListener("roda") mengesan arah tatal.
Animasi GSAP:
- gsap.to() menggerakkan marquee ke arah tertentu.
- Putaran anak panah menambah rasa yang dinamik dan interaktif.
Tatal Tak Terhingga: Menggunakan ulangan: -1 memastikan tenda terus bergelung tanpa henti.

Cabaran & Pembelajaran

? Cabaran: Menyegerakkan arah tatal dengan pergerakan marquee adalah rumit.

? Penyelesaian: API GSAP yang mantap memudahkan untuk memperhalusi animasi dengan sifat seperti ulangan, kemudahan dan tempoh.

Fikiran Akhir

Projek ini menunjukkan cara GSAP boleh mengendalikan interaksi berasaskan tatal dan menghidupkan halaman web. Sama ada anda sedang mengusahakan portfolio peribadi atau tapak web kreatif, GSAP ialah alat yang sempurna untuk menjadikan animasi menarik dan intuitif.

? Cuba sendiri dan kongsi ciptaan anda!

Sumber

Dokumentasi GSAP
Demo Langsung
Kod Sumber pada GitHub

Atas ialah kandungan terperinci 'GSAP Hari ke-1: Animasi Tatal Interaktif dengan Anak Panah Berputar'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!