Erstellen eines erweiterten Marquee mit CSS3-Animation
Heute werden wir einen Blick darauf werfen “Festzelt” Noch einmal. Wir haben in unserem letzten Beitrag, in dem über die Verwendung des Internet-Systems gesprochen wurde, darüber berichtet -Webkit-Festzelt Eigentum, aber dieses Mal werden wir dieses Thema ein wenig weiter gehen.
In diesem Beitrag erstellen wir eine Festzelt ähnlich Effekt mit der CSS3-Animation. Auf diese Weise können wir weitere Funktionalitäten hinzufügen, die nur mit dem System nicht erreichbar wären -Webkit-Festzelt.
Wenn Sie nicht bereits mit dem CSS3-Animationsmodul vertraut sind, empfehlen wir Ihnen, die folgenden Referenzen zu lesen, bevor Sie mit dieser Dokumentation fortfahren:
- CSS3-Animationen - W3School
- CSS Animationen - Mozilla Dev. Netzwerk
Beachten Sie auch, dass CSS3-Animationen derzeit nur in Firefox 8+, Chrome 12+ und Safari 5.0+ mit der vorangestellten Version (-moz- und -Webkit-). Wir werden jedoch nur die offizielle Version von W3C ohne Präfix verwenden, um eine Überfüllung dieses Artikels mit überflüssigen Codes zu vermeiden.
Marquee-Problem beheben
Ein Problem mit Laufschrift ist, dass sich der Text ständig bewegt. Dieses Verhalten stört das Lesen, und der Text ist schwer zu lesen. Dieses Mal werden wir versuchen, eine eigene Version von Marquee zu erstellen und diese benutzerfreundlicher zu gestalten. Zum Beispiel; anstatt den Text kontinuierlich zu bewegen, Wir werden ihn anhalten, wenn er vollständig sichtbar ist, sodass der Benutzer den Text für einen Moment lesen kann.
Das Storyboard (Art)
Jede Kreativ- und Design-Kreation wie ein Logo, eine Illustration oder eine Website beginnt normalerweise mit einer Skizze. Im Bereich der Animationsproduktion erfolgt dies mit einem Storyboard. Bevor wir mit der Codierung beginnen, erstellen wir zuerst eine eine Art Storyboard, um uns zu helfen, unsere Animation zu visualisieren.
Wie Sie im obigen Storyboard sehen können, werden nur zwei Textzeilen angezeigt, die beide nacheinander von rechts nach links verschoben werden.
Unser Storyboard ist nicht so kompliziert wie ein Storyboard für einen echten Animationsfilm, aber der Punkt ist: Wir können jetzt visualisieren, wie unser Laufrahmen aussehen wird.
Das HTML-Markup
Da unsere Animation einfach sein wird, ist das HTML-Markup auch so einfach wie:
Hinzufügen von mit WordPress verknüpften Posts ohne Plugins
Automatisieren Sie Ihre Dropbox-Dateien mit Aktionen
Die Grundstile
Bevor wir uns mit den Animationen beschäftigen, wollen wir einige grundlegende Stile hinzufügen. Beginnen wir mit dem Hinzufügen einer Hintergrundtextur für html Element.
html background: url ('… /images/skewed_print.png'); Als Nächstes werden wir den Laufrahmen in der Mitte des Browserfensters platzieren und einige Details wie inneren Schatten, Hintergrundfarbe und Ränder hinzufügen.
.Festzelt Breite: 500px; Höhe: 50px; Marge: 25px auto; Überlauf versteckt; Position: relativ; Grenze: 1px fest # 000; Marge: 25px auto; Hintergrundfarbe: # 222; -webkit-border-radius: 5px; Grenzradius: 5px; -webkit-box-shadow: Einfügung von 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); Box-Schatten: 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Dann positionieren wir den Text - der in diesem Fall in ein Absatz-Tag eingeschlossen ist - absolut und seit dem absolut Position wird das Element kollabieren lassen, das Element der Breite muss definiert werden 100% um die Breite des Elternteils abzudecken.
.Laufschrift p Position: absolut; Schriftfamilie: Tahoma, Arial, Serifenlose; Breite: 100%; Höhe: 100%; Marge: 0; Zeilenhöhe: 50px; Text ausrichten: Mitte; Farbe: #fff; Text-Schatten: 1px 1px 0px # 000000; filter: dropshadow (color = # 000000, offx = 1, offy = 1);
Schauen wir uns das Ergebnis eine Weile an.
An diesem Punkt haben wir alle Grundstile erledigt, die wir brauchen. Sie können weitere hinzufügen oder personalisieren. Wir empfehlen jedoch, dass Sie sich bis zum Ende des Tutorials bei der angegebenen Markierungsgröße (Höhe und Breite) halten.
Die Animation
Kurz gesagt, Animation ist eine Präsentation von sich bewegenden Objekten. Jede Bewegung wird in einem Zeitrahmen definiert. Wenn wir also an Animationen arbeiten, beschäftigen wir uns hauptsächlich mit der Zeit. Wir berücksichtigen Angelegenheiten wie:
- Wann beginnt sich das Objekt zu bewegen??
- Wie lange dauert es, bis sich das Objekt von einem Punkt zum anderen bewegt?
- Wann und wie lange sollte das Objekt an einem bestimmten Punkt bleiben??
In der CSS3-Animation wird die Zeit kann mit der definiert werden @keyframe Syntax. Bevor Sie jedoch in diesen Abschnitt springen, geben Sie zunächst die Startposition des Laufschriftentextes an.
Wir haben geplant, dass der Text von rechts beginnt und dann nach rechts geht. Hier werden wir es zuerst mit der Eigenschaft CSS3 Transformation rechts positionieren.
.Laufschrift p transform: translateX (100%);
Denken Sie daran, das 100% das wir für unser Absatzelement definiert haben, war gleich dem übergeordneten Element Breite. Dasselbe wird auch hier angewendet. das Absatzelement wird sein übersetzt nach rechts für 100% was in diesem Beispiel gleich ist 500px.
Keyframes
Das @keyframe Die Syntax mag für einige Leute etwas rätselhaft sein. Deshalb haben wir hier eine einfache visuelle Anleitung erstellt, mit der Sie leicht verstehen können, was in der @keyframe Syntax.
Klicken Sie hier, um die größere Version zu sehen.
Die gesamte Animation wird ungefähr dauern 20 Sekunden und ist in zwei Folgen von Dauer unterteilt 10 Sekunden jeder.
In der ersten Sequenz wird der erste Text sofort von rechts eingeschoben und bleibt für einen Moment sichtbar, damit der Benutzer den Text lesen kann, während der zweite Text ausgeblendet bleibt. In der zweiten Sequenz wird der erste Auswahltext nach links verschoben und der zweite Text wird sofort von rechts eingezogen.
Hier sind alle Keyframe-Codes, die wir zum Ausführen der Animation anwenden müssen.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
Das Das Linke Keyframes definieren die erste Sequenz der Animation, während die links zwei Keyframes definieren die zweite Sequenz.
Animation auf die Elemente anwenden
Vergessen Sie nicht, die Animation auf das Element anzuwenden, damit die Animation funktioniert. Die erste Sequenz wird für den ersten Text oder in diesem Fall den ersten Absatz und die zweite Sequenz für den zweiten Absatz angewendet.
.Laufschrift p: nth-child (1) Animation: Left-One 20s Lease unendlich; .marquee p: nth-child (2) Animation: Left-Two 20s-Beschleunigung unendlich;
Wir sind alle mit unserer Animation fertig. Lassen Sie uns die Ergebnisse im Browser sehen.
- Demo
- Quelle herunterladen
Bonus
Wir können den Laufschrift-Text auch so definieren, dass er von oben nach unten oder umgekehrt verschoben wird, genau wie in unserem vorherigen Beitrag. Hier ist, wie es geht; Ersetzen Sie unsere oben genannten Animationscodes durch diesen Code verschiebe den Text nach unten:
.Laufschrift p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Beachten Sie, dass wir das geändert haben X-Achse zu Y-Achse und schlag alle Übersetzung negativer Wert zu positiv und umgekehrt.
Wir haben auch Die Animation wurde umbenannt zu ein Eins und zwei hinunter, Daher müssen wir den Animationsnamen auch im Absatzelement erneut anwenden.
.Marquee p: nth-child (1) Animation: Down-One 20s-Beschleunigung unendlich; .marquee p: nth-child (2) Animation: zwei Reihen nach unten zwanzig.
Oder, wenn Sie das Gegenteil verschieben möchten; von unten nach oben. Hier sind alle Codes, die Sie anwenden müssen:
.Marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s-Leichtigkeit unendlich; .marquee.up p: nth-child (2) Animation: bis zu zwei 20-Sekunden-Beschleunigung unendlich; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Demo
- Quelle herunterladen
Fazit
Trotz der fehlenden aktuellen Browserunterstützung werden CSS3-Animationen, wenn sie ordnungsgemäß durchgeführt werden, zweifellos in Zukunft viele Usability-Probleme lösen, wie wir es in diesem Beispiel getan haben. Wenn wir nur eine kurze Animation benötigen, die für moderne Browser vorgesehen ist, ist die Verwendung von CSS3-Animation wahrscheinlich besser als das Laden eines jQuery-Skripts.
Schließlich ist uns bewusst, dass dieser Artikel für manche Menschen etwas überwältigend sein kann. Wenn Sie also Fragen zu diesem Artikel haben, können Sie ihn gerne in den Kommentaren unten posten.
