10 exemples étonnants d'animation CSS3 innovante
CSS3 a apporté un certain nombre de nouvelles fonctionnalités esthétiquement impressionnantes. L'animation CSS est peut-être la plus amusante à utiliser, qui vous permet d'effectuer de nombreuses fonctions basées sur le mouvement normalement déléguées à JavaScript. Rejoignez-moi dans ma quête épique pour découvrir l'utilisation la plus cool, la plus innovante et, surtout, la plus nerd de l'animation CSS sur le Web. Commencer!
Avertissement: Ces animations sont assez spécifiques au navigateur, donc si vous surfez dans IE6, il est temps d'arrêter de regarder Saved By The Bell, d'abandonner la connexion d'accès à distance et de télécharger un navigateur moderne.
Polaroids rotatifs
Ce tutoriel vous montre comment créer une incroyable pile de photographies animées en utilisant une tonne de nouvelles commandes CSS3. Nous sommes bien partis, celui-ci sera difficile à battre.
Cliquez pour voir la démo
La matrice
Suivez le lapin blanc .. euh je veux dire, regardez cette superbe animation Matrix. Pas tout à fait fidèle au film (les personnages individuels ne changent pas), mais néanmoins impressionnant. Vu que The Matrix est l'un des meilleurs films de science-fiction de tous les temps (je parle du premier film, pas de ces deux autres catastrophes), celui-ci va sauter en haut de notre liste et rester sans doute là pendant un certain temps jusqu'à ce qu'un digne concurrent puisse être trouvé.
Cliquez pour voir la démo
Trippy Spinning Column of Fun
Cette animation folle comporte une colonne tournante composée de rangées rotatives de boîtes colorées et de texte. L'effet global est fou cool et indéniablement vertigineux. Celui-ci est un peu trop craqué pour voler le tonnerre à The Matrix, le champion reste.
Astuce: pour augmenter les risques de mal des transports, faites défiler vers le haut et vers le bas et secouez la tête d'avant en arrière tout en regardant l'animation (nous ne sommes en aucun cas responsables de tout matériel en ruine que vous possédez après avoir jeté votre déjeuner sur votre bureau).
Cliquez pour voir la démo
DJ Hero
Ce didacticiel combine CSS3 et jQuery pour créer des enregistrements en rotation. À l'aide des commandes à l'écran, vous pouvez contrôler la vitesse des enregistrements ou simplement saisir un enregistrement avec votre souris pour fixer des rayures groovy.
Platines virtuelles sur un fond en bois vintage? Cela pourrait être un concurrent assez important, ce débat se réchauffe. Allez-y, cliquez dessus. Tu sais que tu veux jouer.
Cliquez pour voir la démo
Cube animé en 3D
Celui-ci vous permet d'utiliser les touches fléchées pour contrôler la rotation d'un cube 3D. Au début, je pensais que c'était assez boiteux, mais j'ai réalisé que vous pouviez maintenir les touches fléchées enfoncées pour le faire paniquer et passer en mode mort de rotation turbo, ce qui l'a évidemment un peu racheté. Points de style méga pour inclure également Sonic The Hedgehog.
Cliquez pour voir la démo
Fusée
Un vaisseau fusée sans aucun doute apporté par les merveilles de MS-Paint vole dans le ciel à une vitesse à couper le souffle. En quelque sorte… En réalité, il flotte en quelque sorte, transporté par un étrange champ de force rectangulaire avec des lignes pointillées. À mi-chemin de l'animation, la fusée disparaît pratiquement sans raison apparente.Il s'agit donc manifestement d'une fusée furtive de haute technologie ultra-secrète avec un dispositif de camouflage pour repousser les destroyers Vulcains envahisseurs.
Pas exactement un concurrent sérieux. En fait, pourquoi vous ai-je même montré cela? Et encore plus pertinent, existe-t-il un destroyer Vulcain ou est-ce que j'ai inventé ça?
Cliquez pour voir la démo
Temps
Neige
Feuilles
Supprimons toutes les conditions météorologiques en une seule fois, d'accord? Là où il y a de l'animation ringarde, il y a aussi les chutes de neige, les feuilles, la pluie, etc. inévitables. Cependant, ces exécutions particulières, bien que bien faites, ne sont pas si créatives avec le contexte. Faites-moi savoir si vous créez un site Web dont les grêlons géants détruisent tout le contenu de la page, ce serait quelque chose.
Cliquez pour voir la démonstration de neige
Cliquez pour voir la démo Leaves
Flux de couverture
Cette animation imite le flux de couverture d'Apple en utilisant une technique hybride CSS / jQuery comme l'exemple de DJ Hero ci-dessus. En imitant Apple, celui-ci fonctionne bien dans les catégories cool et ringard et fait également un travail innovant (c'est le seul faux flux de couverture CSS3 que j'ai pu trouver). Nous avons encore un autre concurrent entre nos mains.
Cliquez pour voir la démo
Star Wars Crawl
Voilà, game over. Je remercie les autres participants d'avoir joué, mais celui-ci remporte le prix. C'est la scène d'ouverture de freakin 'Star Wars pour pleurer à haute voix… en HTML et CSS (c'est du texte en direct que vous regardez fou). Je vous demande, quelle meilleure utilisation de l'animation CSS pourrait-il y avoir? Je soutiens qu'il n'y en a pas. Faites-moi confiance, montrez-le à votre ami le plus nerd et il se transformera comme par magie en un enfant de 4 ans le matin de Noël.
Cliquez pour voir la démo Epic View
(Safari + Snow Leopard requis)
Conclusion
Pour ceux d'entre vous qui pensent que ce concours a été truqué, vous avez raison. J'ai inventé l'idée du concours après avoir trouvé l'exemple de Star Wars juste pour souligner à quel point tout le reste pâlissait par comparaison. Le véritable objectif de l'article est de vous montrer qu'il n'y a pas de fin aux trucs sympas que vous pouvez créer avec les fonctionnalités d'animation relativement simples intégrées à CSS3.
Utilisez les commentaires ci-dessous pour nous faire savoir quel était votre favori. Aussi, si vous connaissez d'autres exemples, partagez-les!
