Die Ferienzeit ist auf dem Höhepunkt und für einige glückliche Menschen ist das Wetter im Winter in vollem Gange. Ich lebe in Phoenix, also im richtigen Winter, und folglich ist Schnee wirklich nur ein Traum in weiter Ferne. Daher bin ich gezwungen, mich an nerdery zu wenden, um meinen Fix zu bekommen!
Heute gehen wir eine sehr einfache CSS-Technik durch, mit der Sie auf Ihrer Website schneien können. Es dauert nur wenige Minuten und bietet eine gute Einführung in die Verwendung mehrerer Hintergrundbilder und Keyframe-Animationen in CSS.
Webkit FTW
Um es einfach zu halten, starte ich den gesamten Code mit der -webkit Herstellerpräfix. Dadurch wird unser Code sauberer und lesbarer, wenn wir lernen. Der Grund, warum ich mich für Webkit entschieden habe, ist einfach: Die CSS-Keyframe-Animation unterstützt Rocks. Selbst Firefox, der kürzlich die Keyframe-Unterstützung hinzugefügt hat, wird es nicht annähernd so gut schneiden wie Safari.
Anschließend besprechen wir, wie Sie die Präfixe anderer Anbieter verwenden und welche Art von Erfahrung Sie in jedem Browser erwarten können. Wenn Sie wirklich nach einem soliden unterstützten Effekt suchen, der auf so vielen Browsern wie möglich funktioniert, empfehle ich Ihnen, ein jQuery-Snow-Plugin zu suchen. Wenn Sie jedoch Spaß am Lernen mit CSS haben, lesen Sie weiter!
Erste Schritte: Wir drei PNGs
Das Setup für dieses Projekt besteht aus drei schneebedeckten Hintergrundbildern. Sie können definitiv mehr hinzufügen, wenn Sie möchten, aber wir werden hier drei verwenden, um die Dinge schön und einfach zu halten. Grundsätzlich benötigen Sie lediglich drei transparente Hintergrund-PNG-Dateien unterschiedlicher Größe mit zufälligen kleinen weißen Punkten.
Hier ist mein Prozess zum Einrichten dieser. Zuerst habe ich ein 500px-Quadratbild erstellt und einen kleinen Pinsel mit voller Härte verwendet. Sie können einen Streupinsel einrichten, wenn Sie möchten, aber ich mag es, wenn Sie die Punkte manuell auf der Leinwand platzieren. Um sicherzugehen, dass alles gut gekachelt wurde, ging ich zu Filter> Andere> Offset.
Da ich mit einem quadratischen 500px-Bild angefangen habe, werde ich dieses halbieren und um 250px sowohl horizontal als auch vertikal verschieben.
Nachdem Sie diesen Befehl ausgeführt haben, befinden sich möglicherweise einige unordentliche Stellen in der Mitte. Diese sollten leicht mit einem kleinen Löschvorgang aufgeräumt werden. Der wichtige Teil ist, dass die Ränder schön umlaufen, sodass die Bildmitte beliebig verändert werden kann.
Speichern Sie nun Ihre PNG-Datei und wiederholen Sie den gesamten Vorgang für ein 400px-Quadratbild und ein 300px-Quadratbild. Für die letzten beiden habe ich die Schneeflocken etwas unschärfer gemacht und die Deckkraft etwas reduziert.
Anwenden der Hintergründe
Jetzt werden wir diese Bilder auf unseren Hintergrund in CSS anwenden. Ich verwende sie mit dem Body Selector, fühle mich aber frei, sie auf etwas spezifischeres anzuwenden.
Das Implementieren mehrerer Hintergründe ist genau wie das Anwenden nur eines Hintergrunds. Der einzige Unterschied besteht darin, dass Sie nach der ersten Bild-URL ein Komma einfügen und ein anderes hinzufügen. So wird unser Code aussehen. Beachten Sie, dass sich die Hintergrundbilder standardmäßig alle wiederholen.
Mehrere Hintergründe bieten eine großartige Unterstützung auf der ganzen Linie. Das einzige, worüber Sie sich Sorgen machen müssen, ist, dass Sie ältere Versionen von IE erraten haben. Wie bei allem anderen in fortgeschrittenem CSS werden in IE9 mehrere Hintergründe unterstützt, aber nichts älteres. Hoffentlich wird das neue IE-Auto-Update-Programm diesen Arten von Problemen ein Ende setzen!
Einrichten der Keyframes
In der Vergangenheit haben wir einige anständig komplexe Keyframe-Animationen für Design Shack erstellt, aber diesmal können wir uns ganz einfach daran halten.
Obwohl ich das als "einfach" bezeichne? In dieser Syntax ist zwar viel los, also brechen wir sie Stück für Stück auf. Dies führt dazu, dass eine Animation eingerichtet wird, die wir an anderer Stelle in unserem CSS in Aktion setzen können. Die Basissyntax lautet? @Keyframes? Aber hier implementieren wir die Webkit-Version, also haben wir? @ - Webkit-Keyframes? verwendet. Der Schnee? Teil ist der Name, den ich für die Animation gewählt habe. Sie haben hier etwas Freiheit, aber versuchen Sie etwas beschreibendes und hilfreiches zu wählen.
Als nächstes initiieren wir zwei Frames. Die erste ist, wie unsere Seite am Anfang unserer Animation aussehen wird, die zweite ist, wie sie am Ende aussehen wird. Am Anfang habe ich alle unsere Hintergrundbilder oben links auf der Seite mit "0px 0px" platziert. Am Ende habe ich jedes Bild an einen neuen Ort verschoben. So wie wir jedes Bild platzieren, trennen wir jeden Satz von Positionswerten durch ein Komma.
Die Positionslogik
Die Position jedes Bildes am Ende der Animation mag beliebig erscheinen, aber in Wirklichkeit ist dies sehr beabsichtigt. Damit die Animation richtig funktioniert, müssen Sie einige Dinge verstehen.
Sobald eine einzelne Instanz einer Animation ihren Lauf genommen hat, wird sie von vorne beginnen. Wenn Sie Ihre Bilder nicht richtig positionieren, wird an dieser Stelle ein Blip angezeigt.?Der Grund, warum wir Keyframe-Animationen anstelle der einfacheren und viel besser unterstützten Übergangseigenschaft verwenden, besteht darin, dass wir eine Keyframe-Animation endlos schleifen können, sodass sie auf unbegrenzte Zeit weiter schneien kann. In diesem Zusammenhang müssen Sie daran denken, dass eine einzelne Instanz einer Animation erst einmal abgearbeitet wird, wenn sie einmal abläuft. Wenn Sie Ihre Bilder nicht richtig positionieren, wird an dieser Stelle ein Blip angezeigt.
Der Trick besteht darin, die Größe Ihrer Bilder zu verwenden, um sicherzustellen, dass das Endbild mit dem Anfangsbild übereinstimmt, sodass ein nahtloser Übergang entsteht.Zum Beispiel war mein zweites Hintergrundbild 400 x 400 Pixel, also habe ich den Hintergrund während der Animation um 400 Pixel nach unten verschoben, das gleiche für mein drittes Bild bei 300 Pixel. Für mein erstes Image habe ich etwas anders gemacht. Ich wollte, dass es sich schneller bewegt, also habe ich die Höhe verdoppelt und um 1.000 Pixel verschoben. Da dies ein Vielfaches der Höhe ist, stimmt das letzte Bild immer noch mit dem ersten überein.
Beachten Sie auch, dass ich auch die horizontale Position der Bilder verschoben habe. Dies fügt der Gleichung etwas Wind hinzu, sodass der Schnee nicht perfekt senkrecht fällt. Wenn Sie möchten, dass der Schnee beim Fallen hin und her schwankt, fügen Sie einfach ein paar Frames hinzu.
Implementierung der Animation
Unser letzter Schritt besteht darin, zum Body-Selector zurückzukehren und die? -Webkit-Animation? eine Instanz der Animation erstellen. Zuerst geben wir den Namen der Animation an, die wir verwenden möchten, in diesem Fall "Schnee". Dann geben wir die Dauer der Animation an (20 Sekunden), als nächstes wählen wir eine Timing-Funktion (linear) und zum Schluss machen wir die Animation endlos.
Damit sollte Ihre Website in Safari wie verrückt schneit! Lassen Sie uns einen Blick darauf werfen, dies etwas zu erweitern.
Andere Browser-Präfixe
Jetzt fügen Sie weitere Browser-Unterstützung hinzu. Unser Keyframe-Setup-Abschnitt sollte auf Folgendes erweitert werden. Ich habe mit der Basissyntax ohne Browser-Präfix begonnen und dann die Präfixe für Mozilla, Webkit und Microsoft verwendet.
Dann machen wir dasselbe für die Stile im Körper. Alle verschiedenen Browser verwenden dieselbe Syntax, nur das Präfix ändert sich.
Beachten Sie, dass die IE-Unterstützung hier rein für die Zukunft ist. Nur der IE 10 unterstützt Keyframe-Animationen und ist noch in der Entwicklung.
?Nicht so schnell? sagt Firefox
An diesem Punkt wollte ich mit dem Tutorial fertig sein, aber leider habe ich Firefox geöffnet und ein Problem gefunden: keine Animation! Nach einigem Graben stellte sich heraus, dass das Problem in der Implementierung mit mehreren Hintergrundinformationen liegt.
Das Problem ist ein seltsames. Firefox unterstützt mehrere Hintergrundbilder und Keyframe-Animationen. Es unterstützt sogar Animationen, die mehrere Hintergrundbilder verwenden! Aus irgendeinem Grund scheint es jedoch nicht zu unterstützen, die Position der einzelnen Hintergrundbilder während einer Keyframe-Animation unabhängig voneinander zu verschieben.
Aktualisieren
Tolle Neuigkeiten, Kommentator Patric hat unser kleines Firefox-Problem gelöst! Es stellte sich heraus, dass meine Liebe zur Stenografie mich hier in Schwierigkeiten brachte. Firefox funktioniert perfekt, wenn Sie alle Werte in der ersten Zeile auflisten. Hier ist der aktualisierte Keyframe-Code:
Sehen Sie es in Aktion
Demo: Klicken Sie hier, um zu starten
Fazit
Zusammenfassend lässt sich sagen, dass das Erstellen einer reinen CSS-Animation für Schnee-Schnee, die in modernen Browsern funktioniert, ein Kinderspiel ist. Ein paar Minuten Photoshop und ein paar einfache Codezeilen, und Sie haben den Nordpol. IE unterstützt keine Keyframe-Animationen bis Version 10, Opera bietet derzeit keine Unterstützung und Firefox wird unterstützt, ist jedoch nicht so umfangreich wie das, was Sie in Webkit finden.
Dieses Projekt zeigt perfekt, warum es wichtig ist, mit diesem Zeug herumzuspielen, bevor es für die Umsetzung in der realen Welt bereit ist. Ich hatte keine Ahnung, dass Firefox einen Schraubenschlüssel in meine kleine Animation stecken würde, bis ich mir durch ein Experiment die Hände schmutzig machte. Jetzt finde ich mich viel besser mit der notwendigen Syntax für CSS-Animationen von Browser zu Browser vertraut.