10 erstaunliche Beispiele für innovative CSS3-Animation
CSS3 hat eine Reihe von ästhetisch beeindruckenden neuen Funktionen hervorgebracht. Am meisten Spaß macht es vielleicht, mit CSS-Animationen zu spielen, mit denen Sie viele bewegungsbasierte Funktionen ausführen können, die normalerweise an JavaScript delegiert werden. Begleiten Sie mich auf meiner epischen Suche nach der coolsten, innovativsten und vor allem nerdigsten Verwendung von CSS-Animationen im Web. Start!
Warnung: Diese Animationen sind ziemlich browserspezifisch. Wenn Sie also in IE6 surfen, ist es an der Zeit, Saved By The Bell nicht mehr anzusehen, die DFÜ-Verbindung zu beenden und einen modernen Browser herunterzuladen.
Rotierende Polaroids
Dieses Tutorial zeigt Ihnen, wie Sie mit einer Menge neuer CSS3-Befehle einen erstaunlichen, animierten Stapel von Fotos erstellen. Wir haben einen starken Start hingelegt, dieser wird schwer zu schlagen sein.
Klicken Sie hier, um die Demo anzuzeigen
Die Matrix
Folgen Sie dem weißen Kaninchen. Ähm, ich meine, sehen Sie sich diese fantastische Matrix-Animation an. Nicht ganz originalgetreu (die einzelnen Charaktere ändern sich nicht), aber dennoch beeindruckend. Angesichts der Tatsache, dass The Matrix einer der besten Science-Fiction-Filme aller Zeiten ist (ich spreche vom ersten Film, nicht von diesen beiden anderen Katastrophen), wird dieser Film ganz oben auf unserer Liste stehen und ohne Zweifel bleiben dort für eine Weile, bis ein würdiger Konkurrent gefunden werden kann.
Klicken Sie hier, um die Demo anzuzeigen
Trippy Spinning Column of Fun
Diese verrückte Animation enthält eine sich drehende Spalte, die aus rotierenden Reihen farbiger Kästchen und Text besteht. Der Gesamteffekt ist verrückt cool und unbestreitbar schwindelerregend. Dieser ist ein bisschen zu durchgeknallt, um den Donner aus der Matrix zu stehlen, aber der Champion bleibt.
Tipp: Um die Wahrscheinlichkeit einer Reisekrankheit zu erhöhen, scrollen Sie nach oben und unten und schütteln Sie den Kopf hin und her, während Sie die Animation ansehen (wir sind in keiner Weise für ruinierte Hardware verantwortlich, die Sie besitzen, nachdem Sie Ihr Mittagessen über Ihren Schreibtisch geworfen haben).
Klicken Sie hier, um die Demo anzuzeigen
DJ Hero
Dieses Tutorial kombiniert CSS3 und jQuery, um sich drehende Datensätze zu erstellen. Mit den Steuerelementen auf dem Bildschirm können Sie die Geschwindigkeit der Aufzeichnungen steuern oder einfach eine Aufzeichnung mit der Maus aufnehmen, um einige groovige Kratzer zu entfernen.
Virtuelle Plattenspieler auf einem Vintage-Holzhintergrund? Dies könnte ein ziemlich großer Konkurrent sein, diese Debatte heizt sich auf. Klicken Sie darauf. Sie wissen, dass Sie spielen möchten.
Klicken Sie hier, um die Demo anzuzeigen
3D animierter Würfel
In diesem Fall können Sie mit den Pfeiltasten die Drehung eines 3D-Würfels steuern. Zuerst fand ich es ziemlich lahm, aber dann wurde mir klar, dass man die Pfeiltasten gedrückt halten konnte, um es ausflippen zu lassen und in den Turbo-Spinning-Death-Modus zu wechseln, was es offensichtlich ein wenig wieder gut machte. Mega-Style-Punkte auch für Sonic The Hedgehog.
Klicken Sie hier, um die Demo anzuzeigen
Raketenschiff
Ein Raketenschiff, das Ihnen zweifellos von den Wundern von MS-Paint gebracht wurde, fliegt mit atemberaubender Geschwindigkeit über den Himmel. Art von ... In Wirklichkeit schwebt es irgendwie dahin, transportiert von einem seltsamen rechteckigen Kraftfeld mit gepunkteten Linien. Ungefähr zur Hälfte der Animation verschwindet die Rakete praktisch ohne ersichtlichen Grund. Es handelt sich also offensichtlich um eine streng geheime High-Tech-Stealth-Rakete mit einem Tarngerät, um eindringende vulkanische Zerstörer abzuwehren.
Nicht gerade ein ernsthafter Konkurrent. Warum habe ich dir das überhaupt gezeigt? Und noch relevanter: Gibt es so etwas wie einen vulkanischen Zerstörer oder habe ich mir das nur ausgedacht?
Klicken Sie hier, um die Demo anzuzeigen
Wetter
Schnee
Blätter
Lassen Sie uns das ganze Wetterzeug auf einmal ausschalten, sollen wir? Wo es kitschige Animationen gibt, gibt es auch unvermeidlich fallenden Schnee, Blätter, Regen usw. Versteh mich nicht falsch, diese sind ziemlich cool und könnten zu einigen wirklich hervorragenden saisonalen Website-Änderungen führen. Diese speziellen Ausführungen sind zwar gut gemacht, aber im Kontext nicht so kreativ. Lassen Sie mich wissen, wenn Sie eine Website erstellen, auf der riesige Hagelkörner den gesamten Inhalt der Seite zerstören. Das wäre jetzt etwas.
Klicken Sie hier, um die Schneedemo anzuzeigen
Klicken Sie hier, um die Leaves-Demo anzuzeigen
Deckungsfluss
Diese Animation ahmt den Cover-Flow von Apple mithilfe einer hybriden CSS / jQuery-Technik wie dem obigen Beispiel von DJ Hero nach. Durch die Nachahmung von Apple schneidet dieser sowohl in der coolen als auch in der nerdigen Kategorie gut ab und leistet auch hervorragende Arbeit, wenn es darum geht, innovativ zu sein (dies ist die einzige CSS3 Cover Flow-Fälschung, die ich finden konnte). Wir haben noch einen weiteren Anwärter in den Händen.
Klicken Sie hier, um die Demo anzuzeigen
Star Wars Crawl
Das war's, Spiel vorbei. Ich möchte den anderen Teilnehmern für das Spielen danken, aber dieser nimmt den Preis entgegen. Es ist die Eröffnungsszene von Star Wars, in der es darum geht, laut zu schreien… in HTML und CSS (das ist Live-Text, den Sie als Narren ansehen). Ich frage Sie, welche bessere Verwendung von CSS-Animationen könnte es möglicherweise geben? Ich gehe davon aus, dass es keine gibt. Vertrauen Sie mir, zeigen Sie dies Ihrem nerdigsten Freund und er wird sich am Weihnachtsmorgen auf magische Weise in einen 4-Jährigen verwandeln.
Klicken Sie auf die Epic View-Demo
(Safari + Schneeleopard erforderlich)
Fazit
Für diejenigen unter Ihnen, die glauben, dieser Wettbewerb sei manipuliert worden, haben Sie Recht. Ich habe mir die Idee für den Wettbewerb ausgedacht, nachdem ich das Star Wars-Beispiel gefunden hatte, um hervorzuheben, wie sehr alles andere im Vergleich verblasst ist. Die eigentliche Absicht des Artikels ist es, Ihnen zu zeigen, dass die coolen Dinge, die Sie mit den in CSS3 integrierten relativ einfachen Animationsfunktionen erstellen können, kein Ende haben.
Verwenden Sie die folgenden Kommentare, um uns mitzuteilen, welches Ihr Favorit war. Wenn Sie weitere Beispiele kennen, teilen Sie diese bitte mit!
