Lassen Sie mich das im Schnelldurchlauf machen
- Mary Lou hat eine typische Codrops-Demo namens Alternate Column Scroll veröffentlicht.
- Der Scroll-Effekt wird von Locomotive Scroll angetrieben, das wir zufällig schon einmal behandelt haben.
- Bramus beschäftigt sich schon seit einiger Zeit mit nativen CSS-Scroll-Effekten, die die zukünftige CSS Scroll-Timeline-Funktion nutzen. Er hat eine vierteilige Serie, die tief in das Thema eintaucht, beginnend hier.
- Es steckt noch in den Anfängen, aber `@scroll-timeline` ist in Chrome markiert. Bramus hat uns auch gezeigt, wie unglaublich nützlich diese Funktion sein wird, hier auf CSS-Tricks, besonders wenn sie mit WAAPI kombiniert wird.
- Also hat Bramus sich daran gemacht, die Scroll-Aspekte der Demo neu zu erstellen (die mittlere Spalte scrollt natürlich und die beiden äußeren Spalten scrollen rückwärts). Es stellt sich heraus, dass man sie polyfillen und etwas WAAPI einstreuen kann, um sie schön zu replizieren. Cool.
CSS Scroll-Timeline mit prefers-reduced-motion
Das Einzige, was ich hinzufügen würde, ist etwas, um prefers-reduced-motion zu berücksichtigen, da ich mir vorstellen kann, dass diese Art von Scroll-Bewegung jemanden mit Reisekrankheit beeinträchtigen könnte. Um das zu tun, könnten Sie Tests in derselben Zeile kombinieren, in der der Support-Test in JavaScript durchgeführt wird
if (
!CSS.supports("animation-timeline: foo") &&
!window.matchMedia('(prefers-reduced-motion: reduce)').matches
) {
// Do fancy stuff
}Ich bin mir nicht 100% sicher, ob es am besten ist, auf no-preference zu testen oder das Gegenteil von reduce. In jedem Fall besteht der Trick in CSS darin, alles, was Sie mit @scroll-timeline und animation-timeline tun werden, in einen @supports-Test zu packen (falls Sie andernfalls etwas anderes tun möchten) und dann *das* in einen Präferenztest zu verpacken
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: works) {
/* Do fancy stuff */
}
}Hier ist eine Demo davon, mit der gesamten Anerkennung an Bramus, dass er es ermöglicht hat.
Oh und weißt du was? Das CSS wird schöner, sollte @when als Funktion landen
@when supports(animation-timeline: works) and media(prefers-reduced-motion: no-preference) {
} @else {
}
Es ist erwähnenswert, dass dieser gesamte Effekt ohne JS (nur CSS) erstellt werden kann.
Es kann mit Transforms + Perspective erfolgen, um weiter entfernte Elemente langsamer scrollen zu lassen als den Rest der Seite, und dann mit Scale, um die weiter entfernten Elemente so aussehen zu lassen, als wären sie gleich groß wie die normalen Elemente.
Sie können auch ein Element näher an die Kamera bringen als den Rest der Seite und es dann wieder herunterskalieren, um es so aussehen zu lassen, als würde es sich in die entgegengesetzte Richtung bewegen wie der Rest der Seite.
Dieses Beispiel zeigt die Verwendung für eine benutzerdefinierte Scrollleiste, aber Sie könnten es auch für diese scrollenden Spalten verwenden, indem Sie sie zurückbewegen und hochskalieren oder sie näher heranbringen und herunterskalieren, je nachdem, in welche Richtung sie sich beim Scrollen bewegen sollen.
Hinweis: Dieses Beispiel verwendet eine Menge 3D-Matrix-Mathematik, die jedem, der Grafikprogrammierung betrieben hat, vertraut vorkommt und für alle anderen esoterisch ist, aber Sie können das gleiche Ergebnis mit normalen Transforms erzielen.
Firefox 97 ist gerade mit (laut Entwicklerdokumentation) Unterstützung dafür erschienen. Funktioniert aber anscheinend nicht wirklich mit dieser Demo. Jetzt frage ich mich, ob es ein Problem mit der Demo oder mit der Implementierung von Firefox ist.