10 verbluffende voorbeelden van innovatieve CSS3-animatie
CSS3 heeft een aantal esthetisch indrukwekkende nieuwe functies opgeleverd. Misschien wel het leukste om mee te spelen is CSS-animatie, waarmee je veel bewegingsgebaseerde functies kunt uitvoeren die normaal gedelegeerd zijn naar JavaScript. Ga met me mee op mijn epische zoektocht om het coolste, meest innovatieve en, nog belangrijker, nerdiest gebruik van CSS-animatie op internet te ontdekken. Beginnen!
Waarschuwing: deze animaties zijn behoorlijk browserspecifiek, dus als je surft in IE6, is het tijd om te stoppen met het kijken naar Saved By The Bell, de inbelverbinding te dumpen en een moderne browser te downloaden.
Roterende polaroids
Deze tutorial laat je zien hoe je een verbazingwekkende, geanimeerde stapel foto's maakt met behulp van een heleboel nieuwe CSS3-opdrachten. We zijn sterk begonnen, deze zal moeilijk te verslaan zijn.
Klik om de demo te bekijken
The Matrix
Volg het witte konijn .. eh, ik bedoel, bekijk deze geweldige Matrix-animatie. Niet helemaal trouw aan de film (de individuele personages veranderen niet), maar toch indrukwekkend. Aangezien The Matrix een van de beste scifi-films aller tijden is (ik heb het over de eerste film, niet over die andere twee rampen), zal deze naar de top van onze lijst springen en ongetwijfeld blijven daar een tijdje totdat een waardige concurrent gevonden kan worden.
Klik om de demo te bekijken
Trippy Spinning Column of Fun
Deze gekke animatie heeft een draaiende kolom die bestaat uit roterende rijen met gekleurde vakken en tekst. Het algehele effect is waanzinnig cool en onmiskenbaar duizelig. Deze is iets te gek om de donder van The Matrix te stelen, maar de kampioen blijft.
Tip: voor een grotere kans op reisziekte, scroll op en neer en schud je hoofd heen en weer terwijl je naar de animatie kijkt (we zijn op geen enkele manier verantwoordelijk voor geruïneerde hardware die je bezit nadat je je lunch over je bureau hebt gegooid).
Klik om de demo te bekijken
DJ Hero
Deze tutorial combineert CSS3 en jQuery om draaiende records te creëren. Met behulp van de bedieningselementen op het scherm kun je de snelheid van de platen regelen of gewoon een plaat pakken met je muis om wat groovy krassen te maken.
Virtuele draaitafels op een vintage houten achtergrond? Dit zou een behoorlijk grote concurrent kunnen zijn, dit debat is aan het opwarmen. Ga je gang, klik erop. Je weet dat je wilt spelen.
Klik om de demo te bekijken
3D geanimeerde kubus
Hiermee kun je de pijltjestoetsen gebruiken om de rotatie van een 3D-kubus te regelen. In eerste instantie dacht ik dat het behoorlijk zwak was, maar toen realiseerde ik me dat je de pijltjestoetsen ingedrukt kon houden om het in paniek te laten raken en in de turbospin death-modus te gaan, wat het natuurlijk een beetje verloste. Mega stijlpunten om ook Sonic The Hedgehog op te nemen.
Klik om de demo te bekijken
Ruimteschip
Een raketschip dat u ongetwijfeld door de wonderen van MS-Paint wordt aangeboden, vliegt met adembenemende snelheid door de lucht. Een soort van ... In werkelijkheid zweeft het een beetje mee, getransporteerd door een vreemd, rechthoekig krachtveld met stippellijnen. Ongeveer halverwege de animatie verdwijnt de raket praktisch zonder aanwijsbare reden, dus het is duidelijk een uiterst geheime hightech stealth-raket met een gewapend verhul apparaat om binnenvallende Vulcan-vernietigers af te weren.
Niet bepaald een serieuze concurrent. Waarom heb ik je dit zelfs laten zien? En nog relevanter, is er zoiets als een Vulcan-vernietiger of heb ik dat net verzonnen?
Klik om de demo te bekijken
Weer
Sneeuw
Bladeren
Laten we al het weer in één keer uitschakelen, zullen we? Waar goedkope animatie is, is er ook de onvermijdelijke vallende sneeuw, bladeren, regen, enz. Begrijp me niet verkeerd, deze zijn best cool en kunnen leiden tot een aantal echt uitstekende seizoensaanpassingen op de website. Deze specifieke uitvoeringen, hoewel goed gemaakt, zijn echter niet zo creatief met context. Laat het me weten als je een website maakt met gigantische hagelstenen die alle inhoud op de pagina vernietigen, dan zou dat iets zijn.
Klik om de sneeuwdemo te bekijken
Klik om Leaves Demo te bekijken
Cover Flow
Deze animatie bootst Apple's coverflow na met behulp van een hybride CSS / jQuery-techniek zoals het bovenstaande DJ Hero-voorbeeld. Door Apple te imiteren, presteert deze goed in zowel de coole als nerdy categorieën en doet hij er ook goed aan innovatief te zijn (dit is de enige CSS3 Cover Flow-nep die ik kon vinden). We hebben nog een andere kanshebber in handen.
Klik om de demo te bekijken
Star Wars Crawl
Dat is het, game over. Ik wil de andere deelnemers bedanken voor het spelen, maar deze neemt de prijs. Het is de openingsscène van het gekke Star Wars om hardop te huilen ... in HTML en CSS (dat is live tekst die je voor gek houdt). Ik vraag u, welk beter gebruik van CSS-animatie kan er mogelijk zijn? Ik stel dat er geen is. Geloof me, laat dit zien aan je nerdiest vriend en hij zal op magische wijze transformeren in een 4-jarige op kerstochtend.
Klik door naar de demo van Epic View
(Safari + Snow Leopard vereist)
Gevolgtrekking
Voor degenen onder u die denken dat deze wedstrijd vervalst was, heeft u gelijk. Ik bedacht het idee voor de wedstrijd nadat ik het Star Wars-voorbeeld had gevonden, alleen om te benadrukken hoeveel al het andere in vergelijking verbleekte. De echte bedoeling van het artikel is om je te laten zien dat er geen einde komt aan de coole dingen die je kunt bouwen met de relatief eenvoudige animatiefuncties die zijn ingebouwd in CSS3.
Gebruik de onderstaande opmerkingen om ons te laten weten welke jouw favoriet was. Als je nog andere voorbeelden kent, deel ze dan!
