'Jour avec GSAP : animation de défilement interactive avec flèches rotatives'-js tutoriel-php.cn

'Jour avec GSAP : animation de défilement interactive avec flèches rotatives'

Linda Hamilton

Libérer： 2024-12-17 12:25:23

original

894 Les gens l'ont consulté

Introduction

? Bonjour les développeurs !

Bienvenue au Jour 7 de mon GSAP Journey, où j'explore les possibilités infinies des animations sur le Web. Aujourd'hui, j'ai relevé le défi de créer une animation de chapiteau basée sur un défilement interactive avec du texte dynamique et des flèches rotatives.

Grâce aux puissants outils d'animation de GSAP, nous ferons en sorte que la page réponde à la direction de défilement de l'utilisateur (vers le haut ou vers le bas) avec un mouvement et une rotation fluides. Allons-y !

Qu'est-ce que nous construisons ?️

Notre animation comprendra :

Un chapiteau défilant de texte et d'images.
Animations réactives qui s'ajustent en fonction de la direction de défilement.
Flèches rotatives pour ajouter du style !

Vous pouvez voir la démo en direct ici.

Structure HTML

Voici le balisage HTML simple que j'ai utilisé :

<!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
        });
    }
});

Copier après la connexion

Comment ça marche ⚙️

Event Listener : Le window.addEventListener("wheel") détecte la direction de défilement.
Animations GSAP :
- gsap.to() déplace le rectangle de sélection dans une direction spécifique.
- La rotation des flèches ajoute une sensation dynamique et interactive.
Défilement infini : Utilisation de la répétition : -1 garantit que le chapiteau continue de tourner en boucle sans fin.

Défis et enseignements

? Défi : La synchronisation de la direction de défilement avec le mouvement du chapiteau était délicate.

? Solution : l'API robuste de GSAP a permis d'affiner facilement les animations avec des propriétés telles que la répétition, la facilité et la durée.

Pensées finales

Ce projet a montré comment GSAP peut gérer les interactions basées sur le défilement et donner vie aux pages Web. Que vous travailliez sur un portfolio personnel ou sur un site Web créatif, GSAP est l'outil idéal pour créer des animations attrayantes et intuitives.

? Essayez-le vous-même et partagez vos créations !