recherche

Maison >interface Web >js tutoriel >'Jour avec GSAP : animation de défilement interactive avec flèches rotatives'

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

Linda Hamilton
Linda Hamiltonoriginal
2024-12-17 12:25:23897parcourir

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

Comment ça marche ⚙️

  1. Event Listener : Le window.addEventListener("wheel") détecte la direction de défilement.
  2. 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.
  3. 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 !

Ressources

  • Documentation GSAP
  • Démo en direct
  • Code source sur GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html include try using Event this animation github
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir avec précision les dimensions d'une image réelle dans les navigateurs WebKit ?Article suivant：Comment obtenir avec précision les dimensions d'une image réelle dans les navigateurs WebKit ?

Articles Liés

Voir plus