CSS3 a apporté un certain nombre de nouvelles fonctionnalités esthétiquement impressionnantes. Le plus amusant de ces jeux est peut-être l’animation CSS, qui vous permet d’exécuter 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 plutôt spécifiques à votre navigateur. Si vous naviguez dans IE6, il est temps d'arrêter de regarder Saved By The Bell, de mettre fin à la connexion par modem et de télécharger un navigateur moderne.
Polaroïds en rotation
Ce tutoriel vous montre comment créer une pile de photographies animée étonnante à l'aide d'une tonne de nouvelles commandes CSS3. Nous partons bien, celui-ci sera difficile à battre.
Cliquez pour voir la démo
La matrice
Suis 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. Considérant que The Matrix est l’un des meilleurs films de science-fiction de tous les temps (je parle du premier film, pas des deux autres désastres), celui-ci va se placer en haut de notre liste et rester sans aucun doute pendant un moment jusqu’à trouver un digne concurrent.
Cliquez pour voir la démo
Trippy Spinning Column of Fun
Cette animation délirante comporte une colonne en rotation composée de rangées rotatives de blocs et de texte colorés. L'effet global est vraiment cool et indéniablement étourdissant. Celui-ci est un peu trop crevé pour voler la vedette à The Matrix, le champion reste.
Conseil: pour augmenter le risque de mal des transports, faites défiler la liste vers l’arrière et secouez la tête tout en regardant l’animation (nous ne sommes en aucun cas responsables du matériel en ruine que vous possédez après avoir jeté votre lunch sur votre bureau).
Cliquez pour voir la démo
DJ Hero
Ce tutoriel combine CSS3 et jQuery pour créer des enregistrements tournants. À l’aide des commandes à l’écran, vous pouvez contrôler la vitesse des enregistrements ou tout simplement saisir un enregistrement avec votre souris pour créer des rayures superficielles.
Platines virtuelles sur un fond en bois vintage? Cela pourrait être un concurrent assez important, ce débat s’échauffe. Allez-y, cliquez dessus. Vous savez que vous voulez jouer.
Cliquez pour voir la démo
Cube d'animation 3D
Celui-ci vous permet d'utiliser les touches fléchées pour contrôler la rotation d'un cube 3D. Au début, j’ai pensé que c’était plutôt nul, puis j’ai réalisé que vous pouviez appuyer sur les touches fléchées pour le rendre complètement flippant et passer en mode mort tournant, ce qui l’a bien évidemment racheté un peu. Points de style Mega pour inclure Sonic The Hedgehog aussi.
Cliquez pour voir la démo
Fusée
Une fusée sans doute apportée par les merveilles de MS-Paint vole dans le ciel à une vitesse vertigineuse. Sorte de? En réalité, il flotte en quelque sorte, transporté par un étrange champ de force rectangulaire avec des lignes en pointillés. À peu près à mi-parcours de l'animation, la fusée disparaît pratiquement sans raison apparente. Il s'agit donc d'une fusée furtive high-tech très secrète dotée d'un dispositif de camouflage pour parer les envahisseurs Vulcains.
Pas vraiment un concurrent sérieux. En fait, pourquoi est-ce que je vous ai même montré cela? Et encore plus pertinent, existe-t-il un destroyer Vulcain ou est-ce que je l'ai inventé?
Cliquez pour voir la démo
Météo
Neige
Feuilles
Allons assommer toutes les conditions météorologiques en une seule fois. Là où il y a une animation ringarde, il y a aussi l'inévitable chute de neige, feuilles, pluie, etc. Ne vous méprenez pas, elles sont plutôt cool et pourraient conduire à d'excellentes modifications saisonnières du site Web. Cependant, ces exécutions particulières, bien que bien faites, ne sont pas créatives avec le contexte. Faites-moi savoir si vous créez un site Web contenant des grêlons géants détruisant tout le contenu de la page, ce serait déjà quelque chose.
Cliquez pour voir la démo de neige
Cliquez pour voir la démo des feuilles
Flux de couverture
Cette animation reproduit le flux de couverture d’Apple à l’aide d’une technique hybride CSS / jQuery, comme dans l’exemple de DJ Hero ci-dessus. En imitant Apple, celui-ci se comporte bien dans les catégories cool et ringard et fait également un excellent travail d'innovation (c'est le seul faux CSS3 Cover Flow que j'ai pu trouver). Nous avons encore un autre concurrent sur nos mains.
Cliquez pour voir la démo
Star Wars Crawl
C'est tout, game over. J'aimerais remercier les autres participants d'avoir joué, mais c'est celui-ci qui remporte le prix. C'est la scène d'ouverture de freakin 'Star Wars pour avoir crié fort? en HTML et CSS (c'est du texte en direct que vous cherchez imbécile). Je vous demande quelle meilleure utilisation de l'animation CSS pourrait-il y avoir? Je soumets qu'il n'y en a pas. Croyez-moi, montrez-le à votre meilleur ami et il se transformera comme par magie en un enfant de 4 ans le matin de Noël.
Cliquez pour voir la démo de 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âlit par comparaison. L'intention réelle de l'article est de vous montrer qu'il n'y a pas de fin aux choses cool que vous pouvez construire avec les fonctionnalités d'animation relativement simples intégrées à CSS3.
Utilisez les commentaires ci-dessous pour nous faire savoir quel était votre préféré. De plus, si vous connaissez d'autres exemples, partagez-les!