So erstellen Sie ganzseitige Animationen mit CSS

Key Takeaways

• ganzseitige Animationen können mit CSS 3D- und 2D-Transformationen und CSS-Animationen erstellt werden und bieten eine leistungsfähigere und flexiblere Alternative zu herkömmlichen Skript-basierten Animationen für Webinhalte. Das HTML -Element kann mithilfe von CSS -Animationen transformiert werden, um diese Effekte zu erzielen.
• Um konsistente Ergebnisse bei der Anwendung von CSS -Transformationen auf das Element zu gewährleisten, unabhängig von der Größe seines Inhalts kann die Größe des Körperelements auf das des Browserfensters repariert werden, und der Inhalt kann in einem Wrapper angehängt werden. Dieser Ansatz kann auch jedes progressive Rendering, die Wiederbelastung oder jedes Ressourcenladen maskieren, die mit komplexen Inhalten auftreten können.
• Animationen können zu strategischen Zeiten während des Browsing -Erlebnisses eingerichtet werden, um das Erscheinungsbild von Inhalten zu verleihen, wenn eine Seite geladen wird, wenn ein Benutzer auf einen Link klickt. Der optimale Ort, um eine Animation einzurichten, die den Seiteninhalt in Ansicht übergeht, befindet sich oben im Element. Das Animationend -Ereignis kann verwendet werden, um zu erkennen, wann eine Animation abgeschlossen ist, und dann ein Navigationsereignis auszulösen.

moderne Browser wie Internet Explorer 10 unterstützen CSS 3D- und 2D -Transformationen und CSS -Animationen. Indem diese Technologien auf die Leistung Ihrer GPU tippen und asynchron aus dem regulären JavaScript ausgeführt werden, bieten sie eine leistungsfähigere und flexiblere Alternative zu herkömmlichen Skript-basierten Animationen für Webinhalte.

Ich habe darüber gesprochen, wie man mit CSS 3D -Transformationen sowie CSS -Animationen und -übergängen in früheren Artikeln erstellt. In diesem Artikel möchte ich einen „unkonventionelleren“ Anwendungsfall für diese Technologien einführen, indem ich das Konzept von „ganzseitigen Animationen“ beschreibt, die während des Navigationsprozesses verwendet werden können, um Fluidität und Kontinuität zum Stöbern zu verleihen. Unser Ziel ist es, ein nahtloses Browsing -Erlebnis zu erzielen, bei dem Inhalte reibungslos angezeigt werden, wenn der Benutzer eine Seite besucht und übergeht, wenn er auf einen Link klickt oder eine relevante Aktion ausführt.

Diese Effekte können erreicht werden, indem das HTML

-Element mithilfe von CSS -Animationen transformiert wird. Dieser Anwendungsfall zeigt jedoch einige Überlegungen, die wir der Diskussion wert waren, z. > Die Code -Beispiele in diesem Beitrag verwenden nicht fixiertes CSS -Markup, wie durch IE10 Release Preview unterstützt. Andere Browser benötigen möglicherweise Anbieterpräfixe für die CSS -Animationen und CSS -Transformationseigenschaften verwendet.

Transformieren des gesamten Inhalts einer Seite

CSS -Transformationen werden auf den stilistischen Eigenschaften eines HTML -DOM -Elements definiert. Zum Beispiel würde das Markup zum Drehen eines Elements um 45 Grad entlang seiner Z -Achse wie folgt aussehen:

#element {
    transform: rotateZ(45deg);
}

Anhängen einer Transformation an das Element Ihres HTML -Dokuments

Element Ihres HTML -Dokuments funktioniert genauso. Daher können Sie dem für den gleichen Effekt den gleichen Effekt hinzufügen, was Sie so tun können:

body {
    transform: rotateZ(45deg);
}

Schauen wir uns eine Vorher-Nachher-Aufnahme einer Seite an, wenn Sie eine Transformation auf das Körperelement anwenden:

Anwenden einer Dreh- (45 -ass -Transformation auf das Körperelement eines Dokuments.

Für dreidimensionale Transformationen definiert die CSS -Transformationsspezifikation die Perspektiveigenschaft, die auf dem übergeordneten Element des von uns transformierenden Elements angegeben werden kann. Bei der Transformation des

-Elements Ihres Inhalts muss es auf das in der DOM -Hierarchie darüber befindliche Element angewendet werden. Dies ist unkompliziert:

html {
    perspective: 500px;
}

kombiniert dies mit einer Dreh- (45 -Grad -Transformation) des

-Elements liefert das folgende Ergebnis:

Anwenden einer Drehung (45 °) in mit Perspektive: 500px auf .

eingestellt

Wir können die transformierende Eigenschaft auf dem Körperelement für interessante Ergebnisse manipulieren. Schauen wir uns ein paar Beispiele an:

body {
    transform-origin: 50% 100%;
    transform: rotateX(45deg);
}

Das obige Markup legt eine Rotation entlang x für das Körperelement fest, während der Ursprung der Drehungen auf die Unterseite des Elements unter Verwendung von Transform-Originen verschiebt. Tatsächlich dreht dies den Inhalt des Dokuments „in“ in den Bildschirm wie folgt:

Wir können auch die Eigenschaft Perspektiven-Ursprung auf dem Wurzelelement unseres Dokuments manipulieren, um einen Projektionseffekt außerhalb der Achse zu erzielen. Ändern des Stils für bis:

html {
    perspective: 500px;
    perspective-origin: 90% 50%;
}

Unsere Seite sieht jetzt so aus:

Durch die Verwendung von CSS -Transformationen können wir das visuelle Erscheinungsbild des gesamten Inhalts unserer Seite leicht manipulieren. Da die üblichen Layout- und Größenregeln noch gelten, können einige Transformationen zum Körperelement (insbesondere diejenigen, die prozentuale Werte verwenden oder sich auf die Transform-Origin-Eigenschaft verlassen) je nach Inhalt unserer Seite zu unterschiedlichen visuellen Effekten führen. Erinnern Sie sich an unser vorheriges Rotatex (45-Grad-Beispiel) mit Transform-Origin-Set auf 50% 100%.

unten sehen Sie die Ergebnisse vor und nachdem die Transformation angewendet wurde.

Beachten Sie, wie der Inhalt nicht am unteren Rand des Fensters dreht, sondern irgendwann außerhalb des Ansichtsfensters. Dieses Verhalten für CSS -Transformationen wird erwartet: Der

wird normal angelegt, dann wird es entlang seiner unteren Kante gedreht, die sich irgendwo vom Bildschirm befindet. Sie werden auch feststellen, dass sich der tatsächliche Fußdruck des Inhalts erweitert hat (schauen Sie sich die Bildlaufleisten im Bild „After“ an), um den transformierten Inhalten (die Tatsache, dass wir Perspektivprojektion verwenden ausgesprochen).

Wie gehen wir also mit willkürlich großen Inhalten um, wenn wir Transformationen auf unser Körperelement anwenden? Benutzerdefinierte Anpassungen aller Inhalte, um sicherzustellen, dass sich die Größe des Körpers nicht mehr als eine bestimmte Menge erweitert, kann unrealistisch sein. Stattdessen können wir ein einfaches HTML/CSS -Muster verwenden, mit dem wir die Größe des Körperelements auf das des Browserfensters beheben und Inhalte in einem Wrapper

anhängen. Das folgende Markup erreicht genau das:

#element {
    transform: rotateZ(45deg);
}

Die folgende Abbildung zeigt, was passiert, wenn eine Seite vertikal scrolliert wird und wir eine Dreh- (45 -ass) -Transformation in das

-Element unseres Dokuments direkt (links) anwenden und das Wrapper -Muster (rechts) verwenden:

Die direkte Anwendung der Transformation führt zu einem verzerrten visuellen Ergebnis aufgrund der Off-Axis-Projektion (da wir nicht mehr das „Zentrum“ des Körperelements betrachten). Wenn Sie das Wrapper-Muster verwenden, stellt sicher

Durch die Verwendung des obigen Musters und die Einrichtung von CSS -Transformationen können wir nach Möglichkeit mit prozentualen Werten einrichten, wir können unser -Element auf konsistente Weise beeinflussen, unabhängig von der Größe seines Inhalts.

von Transformationen zu Animationen

Nachdem CSS -Animationen die Feinheiten der Anwendung von CSS -Transformationen auf das -Element aussortiert haben, sind CSS -Animationen der nächste Schritt. Wenn wir den oben beschriebenen Prinzipien folgen, können wir Animationen erstellen, die unsere Webinhalte auf interessante Weise in die Sichtweise bringen (oder aus der Sicht entfernen).

Betrachten Sie diese grundlegende @KeyFrames -Regel:

body {
    transform: rotateZ(45deg);
}

Wenn diese Animation auf ein Element angewendet wird, dreht sie sich auf der linken Seite. Wenn Sie auf ein Element angewendet werden, das unser Wrapper -Muster verwendet, ist das visuelle Ergebnis interessanter. Das Dokument dreht sich tatsächlich von außerhalb des sichtbaren Bereichs des Browserfensters in die volle Ansicht:

In ähnlicher Weise können wir Animationen komponieren, die unsere Webinhalte flüssig entfernen. Wenn wir beispielsweise im Drehen in der Ferne verschwinden sollen, könnten wir so etwas verwenden:

#element {
    transform: rotateZ(45deg);
}

mit dem visuellen Ergebnis:

Da wir die volle Leistung von CSS -Animationen verwenden können, um die Gesamtheit unserer Webinhalte zu beeinflussen, haben wir eine große Flexibilität bei der Erzeugung dieser Seiteneffekte (und wir sind sicherlich nicht darauf beschränkt, nur CSS -Transformationen zu verwenden). Aber sobald wir die Effekte komponiert haben, die wir auf unseren Inhalt anwenden möchten, wie können wir sie während des Seitennavigationsprozesses auslösen?

Animationen an

anhängen

Unser Ziel ist es, Triggeranimationen zu strategischen Zeiten während des Browsererlebnisses zu verwenden, um das Erscheinungsbild von Inhalten zu verleihen, wenn eine Seite geladen wird, wenn der Benutzer auf einen Link klickt.

Der erste intuitive Ort, um dem Körperelement eine Animation hinzuzufügen, wäre das Onload -JavaScript -Ereignis. Wie sich jedoch herausstellt, ist das Hinzufügen einer Animation bei Onload -Bränden tatsächlich zu spät. Dieses Ereignis löst tatsächlich aus, wenn der gesamte Inhalt auf unserer Seite geladen wurde (einschließlich der Bilder oder anderer bandbreitenintensiver Ressourcen). Das Anbringen einer Animation an die Onload auf einer bandbreitenintensiven Seite würde dazu führen, dass unsere Inhalte „normal“ angezeigt werden, gefolgt von der Animation, die den Inhalt auslöst und neu ausbringt. Nicht genau der Effekt, den wir anstrebten.

Alternativ könnten wir das Domcontent -Ereignis verwenden, das auslöst, wenn der Browser die DOM -Struktur unseres Inhalts abgeschlossen hat (aber möglicherweise bevor die Ressourcen das Laden beendet haben). Die IE Test Drive DomContent -Demo veranschaulicht den Unterschied zwischen diesen beiden Ereignissen. In Fällen komplexer Webinhalte kann ein moderner Browser jedoch die „progressive“ Renderung durchführen und die Seite angezeigt, bevor der gesamte DOM -Baum geladen wurde. In diesen Situationen wäre das visuelle Ergebnis dem Onload -Szenario ähnlich.

Der optimale Ort, um eine Animation einzurichten, die unseren Seiteninhalt in Ansicht übergeht, befindet sich in der Oberseite des

-Elements. Dies stellt sicher, dass die Animation richtig beginnt, wenn der Inhalt gerendert wird (und dass die Ausgangsposition des Inhalts der des Keyframe unserer ausgewählten Animation sein wird). Eine angenehme Nebenwirkung dieses Ansatzes ist, dass die Animation tatsächlich jedes progressive Rendering, die Wiederaufnahme oder das Laden von Ressourcen mit komplexem Inhalt maskieren kann.

Einrichten der Animationen, die unsere Inhalte aus dem Sicht stellen, ist ebenfalls interessant. Man könnte davon ausgehen, dass wir einen Onclick-Handler an alle Elemente, die in unseren Inhalten interessiert sind . Wenn wir jedoch die Navigation nicht tatsächlich verzögern, werden wir unseren erwarteten Flüssigkeitsübergang nicht sehen.

Dies ist eine gute Gelegenheit, die in der CSS -Animationsspezifikation beschriebenen Animationsereignisse zu nutzen. Insbesondere können wir das Animationend -Ereignis verwenden, um zu erkennen, wann die Animation abgeschlossen ist, und dann eine Navigation auslösen (durch Einstellen von Fenster.location.href, zum Beispiel). So löst unser Onclick die Animation „REME-FROM-View“ aus und registriert einen Handler für Animationend auf

, der sicherstellt, dass das Navigationsereignis auftritt.

Live -Demo verfügbar

Wir haben eine Demonstration und ein Tutorial zum Leben von Seiten mit CSS -Transformationen und -Animationen erstellt, die Tiefe und Beispiele liefern, die über das hinausgehen, was wir hier zeigen konnten. Das Tutorial selbst verwendet vollseitige Animationen während der Seitennavigation, die im Internet Explorer 10 unter Windows 8 und aktuelle Versionen von Chrome und Firefox funktioniert.

Um einfach die Animationen von Seite zu Seite zu genießen, treten Sie durch die Seiten des Tutorials mit den Links „Weiter…“ in der unteren rechten Ecke jeder Seite.

Am Ende des Tutorials geben wir einige zusätzliche Anleitung und Beispielcode zum Einbinden dieser Animationen in Ihren eigenen Webinhalt.

wickeln Sie es

ein

CSS-Transformationen und CSS-Animationen sind zwei leistungsstarke Feature-Sets, die reichhaltigere und immersivere Web-Erlebnisse ermöglichen. Mit einer geringen Menge an Aufwand können Sie Webseiten (sogar statische) erstellen, die ein flüssiges und fast app-ähnliches Navigationserlebnis bieten.

Wenn Sie diesen Beitrag genossen haben, werden Sie Lernable lieben. Der Ort, um frische Fähigkeiten und Techniken von den Meistern zu erlernen. Mitglieder erhalten sofortigen Zugang zu allen E -Books und interaktiven Online -Kursen von SitePoint, wie praktischen CSS.

häufig gestellte Fragen zu ganzseitigen CSS-Animationen

Was sind die wichtigsten Unterschiede zwischen CSS -Animationen und JavaScript -Animationen? CSS -Animationen sind einfacher und einfacher zu implementieren, insbesondere für einfache Animationen. Sie sind auch leistungsfreundlicher, da sie vom Browser-Rendering-Motor behandelt werden. CSS -Animationen haben jedoch im Vergleich zu JavaScript -Animationen nur begrenzte Kontrolle und Flexibilität. JavaScript -Animationen hingegen bieten mehr Kontrolle und Flexibilität und ermöglichen komplexe Animationen. Sie können in Echtzeit angehalten, umgekehrt oder manipuliert werden und auch auf Benutzerinteraktionen reagieren. Einheiten wie Prozentsätze oder Ansichtsfenster anstelle von absoluten Einheiten wie Pixel. Dies stellt sicher, dass die Animationen unabhängig von der Bildschirmgröße ordnungsgemäß skalieren. Sie können auch Medienabfragen verwenden, um die Animationen basierend auf bestimmten Bildschirmgrößen oder Gerätetypen anzupassen.

Kann ich CSS -Animationen mit SVG verwenden? SVG hat seine eigenen CSS -Eigenschaften, die animiert werden können, wie Füllung, Schlaganfall und Transformation. Dies ermöglicht komplexere und interessantere Animationen im Vergleich zu regelmäßigen HTML -Elementen.

Warum funktionieren meine CSS -Animationen in einigen Browsern nicht? Zum Beispiel unterstützt Internet Explorer die Eigenschaft mit Animations-Timing-Funktionen nicht. Um die Kompatibilität des Cross-Browsers zu gewährleisten, können Sie vor den Animationseigenschaften Anbieterpräfixe wie -webkit-, -moz-, -o- und -ms- verwenden. Sie können auch Tools wie autoprefixer verwenden, um diese Präfixe automatisch hinzuzufügen.

Wie kann ich die Leistung meiner CSS -Animationen optimieren? Animierte Eigenschaften, insbesondere solche, die Layout auslösen, ändert sich wie Breite, Höhe und Rand. Verwenden Sie stattdessen Eigenschaften, die nur zusammengesetzte Änderungen wie Transformation und Deckkraft auslösen. Sie können auch die Willensbeschreibung verwenden, um den Browser über die Eigenschaften zu informieren, die wahrscheinlich animiert sind.

Kann ich die Anzeigeeigenschaft mit CSS animieren? mit CSS animiert werden. Dies liegt daran, dass es zwischen seinen Werten keine Zwischenzustände hat. Sie können jedoch einen ähnlichen Effekt erzielen, indem Sie die Eigenschaften der Opazität und Sichtbarkeit animieren. -Eration-zahlreiche Eigentum. Durch die Festlegung ihres Wertes auf unendliche Animation wird die Animation auf unbestimmte Zeit wiederholt.

Kann ich die Geschwindigkeit meiner CSS-Animationen steuern? Eigentum. Diese Eigenschaft definiert die Zeitdauer, die eine Animation zum Abschluss eines Zyklus benötigt.

Wie kann ich eine CSS-Animation pausieren? . Durch die Festlegung ihres Werts auf Pause wird die Animation nicht mehr ausgeführt. Sie können jedoch einen ähnlichen Effekt erzielen, indem Sie zwischen mehreren Hintergrundbildern mithilfe der Eigenschaft Opazität verblassen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ganzseitige Animationen mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!