Mots clés : Veuillez jouer le rôle d'un expert en développement front-end maîtrisant l'interaction créative. Je dois créer une démo de page web de type « scrollytelling » similaire aux pages produits d'Apple. Exigences relatives à la pile technologique : Utilisez HTML, CSS et GSAP (GreenSock) conjointement avec le plugin ScrollTrigger. Logique d'interaction : La hauteur de la page doit être très élevée (par exemple, 5 000 px) et une zone d'affichage fixe en plein écran (conteneur épinglé) doit être créée. Le défilement de l'utilisateur ne doit pas déplacer la page, mais servir de barre de progression (défilement : 1) pour contrôler directement la lecture de l'animation. Flux de travail visuel et d'animation (veuillez respecter le calendrier suivant) : Ouverture : L’écran affiche un simple slogan au centre. Au fur et à mesure que l’on fait défiler la page, le texte s’agrandit puis disparaît progressivement. Démonstration de l'interface utilisateur : Ensuite, des « notifications contextuelles de téléphone » et des « cartes de liste de diffusion » simulées apparaissent en douceur au centre de l'écran depuis différentes directions. Effet d'empilement : au fur et à mesure que vous faites défiler, ces cartes dispersées s'assemblent et s'empilent automatiquement grâce à une transformation 3D (effet d'empilement). Point culminant : un bouton « Se désabonner de tout » apparaît, et lorsque vous faites défiler la page au-delà, toutes les cartes empilées explosent/s'envolent instantanément dans toutes les directions (effet d'explosion). Fin : Le logo final est révélé. Exigences en matière de style : Design minimaliste, coins arrondis, ombres douces et courbes d'animation très flexibles (Elastic/Spring). Veuillez me fournir un fichier de code complet et exécutable.
Chargement du thread
Récupération des tweets originaux depuis X pour offrir une lecture épurée.
Cela ne prend généralement que quelques secondes.