Schieben Sie unbegrenzte Abmessungen mit CSS -Scroll -Zeitplänen

Die ursprüngliche Designphilosophie von CSS, deren Schöpfer sich vorgestellt hatten, dass sie zur Haupttechnologie für die Kontrolle des Webverhaltens werden würde, und Skriptsprachen sind nur eine Alternative, wenn CSS Funktionen nicht deklarativ implementieren kann. Diese Methodik der vorrangigen Verwendung von CSS basiert auf dem Konzept, dass "Skripte Programmierung sind, aber die Programmierung schwierig ist". Seit der Einführung der Pseudoklasse ：hover standardisiert CSS Muster, die von Entwicklern in JavaScript erstellt und in den CSS-Standard "eingeschlossen" wurden. Aus dieser Perspektive ist JavaScript fast wie eine "Problemumgehung", und CSS ist der offizielle Ansatz.

Wenn wir daher CSS zum Implementieren von Skript-ähnlichen Verhaltensweisen verwenden, fühlen wir uns weniger "bawhisch", und es ist keine Überraschung, dass Funktionen wie die neue scroll-timeline -Funktion erscheinen. Viele Entwickler implementieren clevere Parallax -Scrolling -Websites, die uns daran hindern, diese CSS -Funktion "Sprite" wieder in die Flasche zu bringen. Wenn Sie nicht möchten, dass die stotternde Haupt -Thread -Animation auf der nächsten Parallaxe -Scrolling -Site an der "dunklen Seite" von CSS -Hackern wenden. (Nur ein Scherz) Wenn Sie eine imperative Programmierung bevorzugen, gibt es auch eine neue JavaScript -API für Scrolling Association -Animationen.

Migrieren Sie JavaScript -Beispiele in CSS

Ändern Sie das Beispiel für Parallaxe -Bildlaufanimationen vor Chris Coyier, ersetzen Sie die von Chris verwendeten CSS, um die Animation durch eine Zeile von scroll-timeline CSS -Code zu steuern, und entfernen Sie den JavaScript -Code vollständig, der zufriedenstellend einfach ist.

Die Verwendung der Funktion

body, .progress, .cube {
  animation-timeline: scroll();
}

ohne Parameter setzt eine "anonyme Scrolling -Fortschrittszeitleiste", was bedeutet, dass der Browser, wenn unser Schreibmodus in englischer Sprache ist, basierend auf den jüngsten Vorfahrelementen animiert, die vertikal scrollen können. Leider wäre es sehr nützlich, nur die Wahl zu haben, basierend auf dem Scrollen auf der X-Achse oder der Y-Achse eines bestimmten Elements zu scrollen, nicht auf beiden. Als Funktion können wir Parameter an

übergeben, was eine bessere Kontrolle darüber gibt, wie die Schriftrolle die Animation ausführen soll. scroll() scroll() Mehrdimensionales Experiment

Besser ist das

Attribut. Wenn Sie es auf ein Containerelement anwenden, können wir die Attribute auf jedem ausgewählten Vorfahrelement basierend auf jedem scrollierbaren Element mit demselben zugewiesenen Bereich anfertigen. Dies brachte mich zum Nachdenken an ... da CSS Houdini es uns ermöglicht, animationsfreundliche, vererbbare Eigenschaften in CSS zu registrieren, können wir Animationen auf demselben Element basierend auf mehreren scrollierbaren Bereichen auf der Seite kombinieren. Dies öffnet die Tür zu interessanten Unterrichtsdesignmöglichkeiten, wie z. B. meinem Experiment unten.

Scrollen der horizontalen Erzählung auf der hellgrünen Karte dreht die 3D -NES -Konsole horizontal und scrollt die vertikale Erzählung auf der dunkelgrünen Karte die NES -Konsole vertikal. In meinem vorherigen Beitrag erwähnte ich, dass meine früheren CSS -Tricks immer auf die Möglichkeit des Versteckens und der Aufführung begrenzter Möglichkeiten mit CSS zurückzuführen sind. Was mich an diesem rollbasierten Experiment interessiert, ist die Kombinationsexplosion vertikaler und horizontaler Drehungen von Kombinationen. Animierte Zeitpläne bieten reine CSS -Interaktivität, die in der Vergangenheit unmöglich war.

Implementierungsdetails sind nicht so wichtig wie die Verwendung von timeline-scope und benutzerdefinierte Eigenschaften. Wir registrieren zwei benutzerdefinierte Winkeleigenschaften:

body, .progress, .cube {
  animation-timeline: scroll();
}

Dann "liehen" wir NES 3D -Modelle aus den Beispielen in Julian Garners erstaunlicher CSS 3D -Modellierungsanwendung. Wir aktualisieren die .scene Klasse, um die 3D -Rotation basierend auf unseren neuen Variablen wie folgt zu machen:

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}</angle></angle>

Als nächstes stellen wir ein body Element mit zwei benutzerdefinierten Scopes an. scroll-scope

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

Ich sehe keine offizielle Dokumentation zum Übergeben mehrerer Bereiche, aber es funktioniert in Google Chrome und Edge. Wenn es sich nicht um eine formell unterstützte Funktion handelt, hoffe ich, dass es Teil des Standards ist, da es sehr bequem ist.

Als nächstes definieren wir die benannte Timeline für die beiden scrollbaren Karten und die Achse, die wir die Animation auslösen möchten.

body {
  scroll-scope: --myScroller,--myScroller2; 
}

und fügen Sie die Animation zur Szene hinzu:

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

Da das 3D -Modell die x- und y -Winkel des Dokumentkörpers erbt, dreht die Bildlaufkarte das Modell nun in einer Kombination aus vertikalen und horizontalen Winkeländerungen.

Benutzersteuerungsanimation jenseits der Scrollbar

Überlegen Sie sorgfältig darüber, dass dieses Verhalten nicht nur für scrollgesteuerte Animationen nützlich ist. Im obigen Experiment verwenden wir den scrollbaren Bereich eher als Schieberegler, um die Eigenschaften des 3D -Modells zu steuern. Nachdem ich meine Arbeit beendet hatte, ging ich auf einen Spaziergang und stellte fest, wie cool es wäre, wenn der tatsächliche Bereich der Reichweite die Animationszeitleiste steuern könnte. Dann fand ich, dass sie können! Zumindest in Chrom. Reines CSS CMS?

Während wir das 3D-Modell von Julian Garner anforderten, sehen wir sehen, ob wir den Bereichseingang verwenden können, um sein X-Wing-Modell zu steuern.

unglaublich, dass wir dies tun können, indem wir einfach CSS verwenden, und wir können dies mit einer beliebigen Anzahl von Eigenschaften tun. Für mich ist das nicht genug. Ich würde gerne andere Eingabesteuerungen sehen, die die Animationszeitleiste manipulieren können. Stellen Sie sich vor, dass das Textfeld die Animation beim Ausfüllen drückt oder dass die Schaltfläche die Animation abspielen oder umkehren kann. Letzteres kann in gewissem Maße implementiert werden, indem die

Pseudoklasse mit den :active -attributen kombiniert wird. Meiner Erfahrung nach kann der Browser verwirrt sein, wenn Sie versuchen, ihn zu verwenden, um mehrere benutzerdefinierte Eigenschaften zu animieren. Im Gegensatz dazu wurde die Animationszeitleiste unter Berücksichtigung dieses Anwendungsfalls entworfen, sodass sie reibungslos verlief und genau das erwartete. animation-play-state

Ich bin nicht der einzige, der das Potenzial dieser aufkommenden CSS -Funktion bemerkte. Jemand hat diesen cleveren Untergangsklon durch Kombination von scroll-timeline und Kontrollkästchen -Tricks implementiert. Mein Problem ist, dass es immer noch nicht genug ist. Wir haben genügend Ressourcen in Chrome, um den Avatar -Builder mithilfe von Scrollbars und Bereichseingaben als Spielsteuerung zu implementieren. Ich freue mich, eine unvorhersehbare, komplexe Erfahrung auszuprobieren, die in der Ära vor dem Auftreten der scroll-timeline -Features beispiellos war. Wenn Sie die Definition von Videospielen für Außerirdische erklären müssen, würden Sie dann nicht sagen, dass es sich nur um eine super interaktive Animation handelt?

Das obige ist der detaillierte Inhalt vonSchieben Sie unbegrenzte Abmessungen mit CSS -Scroll -Zeitplänen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!