Rumah >hujung hadapan web >tutorial js >'GSAP Hari ke-1: Animasi Tatal Interaktif dengan Anak Panah Berputar'
? 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!
Animasi kami akan merangkumi:
Anda boleh melihat demo langsung di sini.
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 }); } });
? 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.
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!
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!