Portraits grinçants: s'amuser avec la fonction CSS Path ()

Cet article explore les possibilités créatives de CSS clip-path: path(), désormais largement pris en charge, pour la conception Web dynamique. Apprenez à créer des formes SPAT interactives et animées en utilisant plusieurs définitions de chemin SVG et transitions CSS. Améliorez l'engagement des utilisateurs avec des éléments interactifs qui modifient dynamiquement des chemins de clip et des transformations via des variables CSS sur des états de survol et actifs. Incorporer le caractère et la réactivité à travers des images et des animations réagissant aux interactions utilisateur. Explorez des techniques avancées comme les effets de parallaxe et l'intégration audio pour des expériences d'utilisateurs plus riches.

Le support de Chrome 88 pour clip-path: path() le rend utilisable dans la plupart des principaux navigateurs. Cela permet d'utiliser des définitions de chemin SVG pour les chemins de clip, permettant des formes complexes nécessitant précédemment SVG. Cet article montre la création de «portraits grinçants», une application ludique de clip-path: path().

Création et application des splates:

Plusieurs définitions de chemins SVG sont créées (en utilisant un éditeur de vecteur comme Figma), garantissant un nombre de nœuds cohérent pour les transitions CSS lisses. Ces chemins sont convertis en variables CSS (--splat, --splattier, --splatted). A .portrait div est stylé avec clip-path: path(var(--clip, var(--none))), en utilisant initialement --splat. Les états de survol et actifs changent --clip en --splattier et --splatted respectivement, créant l'animation.

Ajout d'interactivité et de caractère:

Échelle de contrôle des variables CSS et rotation sur les états de survol et actifs, améliorant l'effet visuel. Trois images sont superposées dans le .portrait div, stratégiquement affichées / cachées à l'aide de sélecteurs et de variables CSS pour créer une réponse visuelle à l'interaction utilisateur. :nth-of-type

Parallaxe et intégration audio:

Un effet de parallaxe est implémenté à l'aide d'une image d'arrière-plan carrelée et d'un javascript pour ajuster

sur la base du mouvement du pointeur. Une fonction de cartographie évolue dynamiquement les coordonnées du pointeur pour contrôler l'effet de parallaxe. Enfin, l'audio (obtenu à partir de ressources comme freeSound.org) est intégré, jouant des sons distincts sur les événements de pointeur et de pointerup. background-position

Ce projet démontre l'utilisation créative de clip-path: path(), les variables CSS, les transitions et JavaScript pour une conception Web interactive et engageante. Le code est disponible dans une collection Codepen. L'article se termine par une section FAQ concernant les questions courantes sur les fonctions de chemin CSS et leurs applications.

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!