CSS3 hat eine Reihe ästhetisch beeindruckender Neuerungen hervorgebracht. Am interessantesten ist die CSS-Animation, mit der Sie viele Bewegungsfunktionen ausführen können, die normalerweise an JavaScript delegiert werden. Begleite mich auf meiner epischen Suche nach der coolsten, innovativsten und vor allem nerdigsten Verwendung von CSS-Animationen im Web. Start!
Achtung: Diese Animationen sind ziemlich browserspezifisch. Wenn Sie also im IE6 surfen, sollten Sie nicht mehr Gespeicherte Dateien anzeigen, die DFÜ-Verbindung aufgeben und einen modernen Browser herunterladen.
Rotierende Polaroids
In diesem Lernprogramm erfahren Sie, wie Sie mit Hilfe einer Menge neuer CSS3-Befehle erstaunliche, animierte Fotostapel erstellen. Wir haben einen guten Start, dieser wird schwer zu schlagen sein.
Klicken Sie hier, um die Demo anzuzeigen
Die Matrix
Folge dem weißen Hasen? Ich meine, schau dir diese tolle Matrix-Animation an. Nicht ganz richtig für den Film (die einzelnen Charaktere ändern sich nicht), aber trotzdem beeindruckend. Da The Matrix einer der besten Science-Fiction-Filme aller Zeiten ist (ich spreche vom ersten Film, nicht von den beiden anderen Katastrophen), wird dieser hier 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 zeigt eine rotierende Säule, die aus rotierenden Reihen farbiger Kästchen und Text besteht. Der Gesamteffekt ist verrückt cool und unbestreitbar schwindelerregend. Dieser ist etwas zu rissig, um den Matrix-Matrix den Donner zu stehlen, der Champion bleibt jedoch.
Tipp: Um die Gefahr einer Reisekrankheit zu erhöhen, scrollen Sie auf und ab und schütteln Sie den Kopf, während Sie die Animation ansehen (wir sind in keiner Weise für beschädigte Hardware verantwortlich, die Sie besitzen, nachdem Sie Ihr Mittagessen über Ihren Schreibtisch geworfen haben).
Klicken Sie hier, um die Demo anzuzeigen
DJ-Held
In diesem Lernprogramm werden CSS3 und jQuery kombiniert, um sich drehende Datensätze zu erstellen. Mit den Steuerelementen auf dem Bildschirm können Sie die Geschwindigkeit der Aufzeichnungen steuern oder einfach mit der Maus eine Aufzeichnung abrufen, um groovige Kratzer zu legen.
Virtuelle Plattenspieler auf einem hölzernen Hintergrund der Weinlese? Dies könnte ein ziemlich wichtiger Konkurrenten sein, diese Debatte wird heiß. Fahren Sie fort, klicken Sie darauf. Sie wissen, dass Sie spielen möchten.
Klicken Sie hier, um die Demo anzuzeigen
3D animierter Würfel
Hier können Sie die Pfeiltasten verwenden, um die Drehung eines 3D-Würfels zu steuern. Zuerst dachte ich, dass es ziemlich lahm war, aber dann wurde mir klar, dass Sie die Pfeiltasten gedrückt halten konnten, um ausflippen zu lassen und in den Turbo-Sping-Death-Modus zu wechseln, was ihn offensichtlich ein wenig löste. Mega-Style-Punkte für Sonic The Hedgehog.
Klicken Sie hier, um die Demo anzuzeigen
Raketenschiff
Ein Raketenschiff, das zweifellos von den Wundern von MS-Paint zu Ihnen gebracht wurde, fliegt mit atemberaubender Geschwindigkeit über den Himmel. Art von? In Wirklichkeit schwebt es gewissermaßen dahin, transportiert von einem merkwürdigen, rechteckigen Kraftfeld mit gepunkteten Linien. Ungefähr zur Hälfte der Animation verschwindet die Rakete praktisch ohne ersichtlichen Grund, also ist es offensichtlich eine streng geheime High-Tech-Stealth-Rakete mit bewaffnetem Tarngerät, um einfallende vulkanische Zerstörer abzuwehren.
Nicht gerade ein ernsthafter Konkurrent. Warum habe ich Ihnen das sogar gezeigt? Und was noch wichtiger ist, 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 alle Wetterartikel auf einen Schlag ausschalten, oder? Wo kitschige Animationen sind, gibt es auch den unvermeidlichen fallenden Schnee, Blätter, Regen usw. Verstehen Sie mich nicht falsch, diese sind ziemlich cool und könnten zu einigen wirklich guten saisonalen Website-Änderungen führen. Diese speziellen Ausführungen sind zwar gut gemacht, aber im Kontext nicht kreativ. Lassen Sie mich wissen, wenn Sie eine Website erstellen, die riesige Hagelkörner enthält, die den gesamten Inhalt der Seite zerstören. Jetzt wäre das etwas.
Klicken Sie hier, um die Snow-Demo anzuzeigen
Klicken Sie hier, um die Leaves-Demo anzuzeigen
Cover Flow
Diese Animation ahmt den Cover-Flow von Apple nach, wobei eine hybride CSS / jQuery-Technik verwendet wird, wie im obigen DJ Hero-Beispiel. Durch die Nachahmung von Apple ist dies sowohl in den coolen als auch in den nerdy-Kategorien gut und auch innovativ (dies ist die einzige CSS3-Cover-Flow-Fälschung, die ich finden konnte). Wir haben noch einen weiteren Anwärter in unseren Händen.
Klicken Sie hier, um die Demo anzuzeigen
Star Wars Crawl
Das ist es, Spiel vorbei. Ich möchte den anderen Teilnehmern für das Spielen danken, aber dieser nimmt den Preis. Es ist die Eröffnungsszene von Star Wars, weil du laut geschrien hast? in HTML und CSS (das ist Live-Text, den Sie bei Dummkopf sehen). Ich frage Sie, welche bessere Verwendung von CSS-Animationen könnte es geben? Ich gebe vor, dass es keine gibt. Vertrauen Sie mir, zeigen Sie es Ihrem nerdiest Freund und er wird sich am Weihnachtsmorgen magisch in einen 4-jährigen verwandeln.
Klicken Sie auf die Epic View-Demo
(Safari + Schneeleopard erforderlich)
Fazit
Für diejenigen von Ihnen, die glauben, dass dieser Wettbewerb manipuliert wurde, haben Sie recht. Ich habe mir die Idee zum Wettbewerb ausgedacht, nachdem ich das Star Wars-Beispiel gefunden hatte, nur um hervorzuheben, wie viel alles im Vergleich dazu blasse. Die eigentliche Absicht des Artikels besteht darin, Ihnen zu zeigen, dass den coolen Sachen, die Sie mit den relativ einfachen Animationsfunktionen in CSS3 erstellen können, kein Ende ist.
Verwenden Sie die Kommentare unten, um uns mitzuteilen, welcher Ihrer Favoriten war. Wenn Sie weitere Beispiele kennen, teilen Sie diese bitte!