Démos sympas de CodePen (4 août)

forme d'idée

Cette démo est un composant de soumission/rappel d'idées sympa. Les transitions fluides, un choix parfait de couleurs et la bonne quantité d'interactions garantissent une expérience utilisateur agréable. Il s'agit de la première des deux démos de cette liste de Jon Kantner.

Un robot qui se balance

Amit Sheen présente à nouveau la puissance 3D du CSS. Cette fois, c'est un robot qui joue sur une balançoire. Vérifiez les détails et comment les différentes parties du corps bougent ensemble pour créer une animation fluide et magnifique.

Métropole à vol d’oiseau

Une vue infinie impressionnante d'une ville vue du ciel (déplacez la souris dessus pour changer de direction.) Et savez-vous ce qui la rend encore plus étonnante ? Il n’utilise aucune des bibliothèques 3D populaires ! C'est du JavaScript vanille. Félicitations à Niklas Knaack pour une démo incroyable.

Chandler étreignant un générateur de mèmes d'album

Basée sur un mème politique récent (qu'elle a également codé), Ines apporte un mème inspiré de Friends : Chandler Bean tenant un album. La pochette est une entrée de fichier, vous pouvez donc personnaliser l'image avec ce que vous voulez. Propre.

J'ai entendu dire que tu aimais les rotations

Une autre démo animée en 3D. Une plate-forme (?) flottant dans l'espace, tournant et tournant sans arrêt. Cette démo hypnotisante de Scott R McGann est également codée en JavaScript vanille et en canevas.

Tableau d'humeur

Hannah a partagé ce tableau qui sert également de jolie galerie d'images pour le Web. Avec peu d'animations et de transitions, il y a une ambiance lycée/collège… Vous avez dit nostalgie ?

Zoom de défilement spatial 3D

Plus de CSS 3D ! (Il y a certainement un modèle dans la liste de ce mois-ci.) La combinaison d'animations à défilement avec des traductions 3D et de l'opacité crée cet effet sympa en CSS pur. C'est une excellente démo d'Adam Argyle.

Formulaire HTML de Rube Goldberg

C'est une idée amusante soigneusement mise en œuvre par Ksenia Kondrashova. Au fur et à mesure que vous remplissez le formulaire, l'engin se déplace pour rapprocher le bouton d'envoi. La machine n'est peut-être pas pratique, mais elle rend la forme différente et apporte un effet wow.

Aperçu du message texte dans Badge

Un autre composant de Jon Kantner. C’est une manière intéressante de présenter les données : non seulement on sait qu’il y a un message, mais on peut le lire en survolant le badge. Cela pourrait être utile au-delà du mobile (où l'effet de survol serait un défi) et également pour les notifications sur le Web.

Carrousel

Pour clôturer la liste, il y a une autre démo CSS 3D, cette fois par Vicio Bonura, qui a créé un carrousel CSS qui pourrait servir de modèle pour générer d'autres carrousels car le code est simple et facile à suivre.

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!