Démos sympas de CodePen (4 octobre)

Effet de distorsion de l'eau léger

Ksenia Kondrashova a créé une démo avec un magnifique shader avec un effet d'eau. Cela semble réaliste, comme l’eau qui bouge dans une piscine. C’est apaisant et hypnotique.

Effet de parallaxe 3D au survol

Temani Afif crée des effets étonnants en utilisant une seule balise d'image. C'est un excellent exemple : une balise HTML crée un effet 3D surprenant… et le code est si simple ! La démo nécessite à peine 18 lignes de CSS !

Saturation sélective en survol

Une autre démo sympa utilisant un seul élément d'image. Ana Tudor a utilisé des filtres SVG pour appliquer un masque d'interpolation de couleur et mettre en évidence les éléments de l'image en fonction de la couleur.

La pomme de terre ennuyeuse

Vous aurez besoin des haut-parleurs pour cette démo amusante de Sophia Wood (alias Fractal Kitty). Cliquez sur les boutons sonores ou appuyez sur les boutons 1 à 8 pour faire parler la pomme de terre… mais attention, cela peut être tout aussi divertissant et ennuyeux.

Galerie de roues (CSS uniquement)

Une galerie circulaire animée créée par Chris Bolson. Passez la souris sur les images et voyez-les s'animer. J'aime la façon dont le titre apparaît à côté du mouvement de la photo. Lisse.

pointillisme images NASA

Une autre démo de Sophia Wood. Elle a utilisé P5 pour générer des points générés à l'infini. À chaque cycle, ils seront de taille plus petite, révélant une image spatiale. Comme d'habitude, une combinaison créative d'art et de code.

table de vérification des contrastes de couleurs

Il s'agit plutôt d'une démo d'accessibilité « ringard » : une grille avec tous les noms de couleurs CSS et leur combinaison de contraste de couleurs. Dave Rupert a utilisé la spécification WCAG 2.1 pour déterminer les résultats.

Panneau Mon jardin

Chris Coyier reproduit ce signe emblématique en appliquant des animations de défilement pour que toutes les lignes ajustent dynamiquement (le texte est modifiable) leur police afin que toutes les lignes occupent la même largeur. Parce qu'elle utilise la propriété animation-range, cette démo ne fonctionnera que sur Chrome.

Pile de cartes animées par défilement avec événements instantanés de défilement

Paul Noble crée une superbe pile de cartes combinant des animations par défilement et des événements de défilement. Vous devez utiliser un trackpad (cette démo ne fonctionnera pas avec une souris) pour profiter des belles transitions.

Double progression rapide

Une autre démo d'Ana Tudor. Le code est propre, court et sémantique. J'ai aimé la conception de ce composant (d'après une question Reddit ?) et je me voyais utiliser quelque chose de similaire dans certains projets.

Si vous avez aimé cette liste, consultez les démos du mois dernier !

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!