Parallaxe alimentée par CSS Custom Properties

Cet article détaille comment créer un effet de parallaxe captivant à l'aide de propriétés personnalisées CSS, transformant une image statique en une scène dynamique et interactive. Le nouveau site Web de Kent C. Dodds a fourni l'inspiration, avec une image centrale qui exigeait le mouvement. La solution exploite seulement deux propriétés personnalisées CSS, --ratio-x et --ratio-y , pour contrôler l'effet de parallaxe.

Le code JavaScript Core capture la position du curseur et le mappe sur une plage utilisable. Les fonctions mapRange() et clamp() de GSAP simplifient ce processus, garantissant que les valeurs restent à -1 et 1. Une fonction generateHandler crée des écouteurs d'événements réutilisables, cartographie la position du curseur par rapport aux éléments spécifiques. Ces valeurs mappées sont ensuite définies sous forme de propriétés personnalisées CSS.

La magie réside dans le CSS. calc() combine les propriétés personnalisées avec d'autres valeurs pour contrôler divers aspects, tels que l'échelle et la teinte. L'exemple démontre la modification de l'échelle basée sur --ratio-y et la teinte basée sur --ratio-x . La flexibilité permet un contrôle créatif sans modifier le noyau JavaScript.

La création de la scène consiste à décomposer l'image en éléments individuels, une technique similaire au traçage de l'art CSS. Ces éléments, représentés en tant qu'enfants dans un conteneur, sont stylisés à l'aide de propriétés personnalisées dans les parasites. Chaque élément définit ses propres paramètres de mouvement et de rotation, interagissant avec les valeurs globales --ratio-x et --ratio-y . Une image Sprite optimise les performances en évitant plusieurs demandes d'image.

L'article progresse à travers plusieurs démos, illustrant le processus étape par étape. Il met en évidence l'utilisation d'un objet de configuration pour définir les positions, tailles et transformations des éléments. La conception réactive est obtenue en utilisant des valeurs de pourcentage pour le positionnement et le dimensionnement. L'ajout de --allow-motion s'adresse aux utilisateurs préférant une réduction du mouvement, offrant une expérience plus fluide pour tous.

Enfin, l'article montre comment cette technique est implémentée dans une structure de composants React, en utilisant un crochet personnalisé ( useParallax ) pour une réutilisation et une maintenabilité de code efficaces. L'implémentation React résume la logique de parallaxe, ce qui la rend facilement intégrée dans des projets plus grands. Le résultat est un effet de parallaxe poli et performant entièrement entraîné par CSS et une petite quantité de JavaScript. L'article conclut en soulignant la polyvalence des sprites d'image et la puissance des propriétés personnalisées CSS dans la création d'expériences Web engageantes.

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!