Was ist neu bei scrollbaren Animationen?
Scroll-Animationen sind eine Möglichkeit, Ihrer Website oder Webanwendung mehr Interaktivität und visuelles Interesse zu verleihen, die durch die Scrollposition des Nutzers ausgelöst werden. Dies ist eine gute Möglichkeit, das Interesse der Nutzer aufrechtzuerhalten und Ihre Website optisch ansprechender zu gestalten.
Früher bestand die einzige Möglichkeit zum Erstellen von scrollgesteuerten Animationen darin, auf das Scroll-Ereignis im Hauptthread zu reagieren. Dies hat zu zwei großen Problemen geführt:
- Das Scrollen wird in einem separaten Thread ausgeführt und führt daher Scroll-Ereignisse asynchron aus.
- Animationen des Hauptthreads können Verzögerungen verursachen.
Dadurch lassen sich keine leistungsstarken scroll-gesteuerten Animationen erstellen, die mit dem Scrollen synchron sind.
Wir haben jetzt neue APIs zur Unterstützung scrollbarer Animationen eingeführt, die Sie über CSS oder JavaScript verwenden können. Die API versucht, so wenige Hauptthread-Ressourcen wie möglich zu verwenden, wodurch scrollgesteuerte Animationen wesentlich einfacher zu implementieren und auch reibungsloser sind. Die API für scrollbare Animationen wird derzeit in den folgenden Browsern unterstützt:
In diesem Artikel wird der neue Ansatz mit der klassischen JavaScript-Technik verglichen, um zu zeigen, wie einfach und reibungslos scrollbare Animationen mit der neuen API sein können.
Die CSS API für scrollbare Animationen im Vergleich zum klassischen JavaScript
Die folgende beispielhafte Fortschrittsanzeige wurde mithilfe von JavaScript-Klassentechniken erstellt.
Das Dokument reagiert jedes Mal, wenn das scroll-Ereignis eintritt, um zu berechnen, zu wie viel Prozent des scrollHeight-Elements der Nutzer gescrollt hat.
document.addEventListener("scroll", () => {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progress").style.width = scrolled + "%";
})
Die folgende Demo zeigt dieselbe Fortschrittsanzeige, wobei die neue API mit CSS verwendet wird.
@keyframes grow-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#progress {
animation: grow-progress auto linear forwards;
animation-timeline: scroll(block root);
}
Die neue CSS-Funktion animation-timeline wandelt eine Position innerhalb eines Scrollbereichs automatisch in einen Prozentsatz des Fortschritts um und erledigt den Rest.
Jetzt ist der interessante Teil – Nehmen wir an, Sie haben in beiden Versionen der Website eine sehr aufwendige Berechnung implementiert, die den Großteil der Hauptthreadressourcen aufbrauchen würde.
function someHeavyJS(){
let time = 0;
window.setInterval(function () {
time++;
for (var i = 0; i < 1e9; i++) {
result = i;
}
console.log(time)
}, 100);
}
Wie Sie vielleicht schon erwartet haben, reagiert die klassische JavaScript-Version aufgrund der Verknüpfung der Hauptthreadressourcen langsam und verzögert. Andererseits ist die CSS-Version völlig unberührt von der aufwendigen JavaScript-Arbeit und kann auf Scroll-Interaktionen des Nutzers reagieren.
Die CPU-Auslastung in den Entwicklertools unterscheidet sich grundlegend, wie in den folgenden Screenshots gezeigt.
Die folgende Demo zeigt eine Anwendung einer scrollgesteuerten Animation, die von CyberAgent erstellt wurde. Sie können sehen, dass das Foto beim Scrollen eingeblendet wird.
Neue JavaScript API für Scroll-Animationen im Vergleich zum klassischen JavaScript
Die Vorteile der neuen API sind nicht nur auf CSS beschränkt. Auch mit JavaScript können Sie flüssige Scroll-Animationen erstellen. Sehen Sie sich das folgende Beispiel an:
const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
{
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
fill: 'forwards',
timeline: new ScrollTimeline({
source: document.documentElement,
}),
}
);
So können Sie die gleiche Animation der Fortschrittsanzeige wie in der vorherigen CSS-Demo nur mit JavaScript erstellen. Die zugrunde liegende Technologie ist dieselbe wie die CSS-Version. Die API versucht, so wenige Hauptthread-Ressourcen wie möglich zu verwenden, wodurch die Animationen im Vergleich zum klassischen JavaScript-Ansatz deutlich reibungsloser ablaufen.
Die neue API funktioniert auch in Verbindung mit der bestehenden Web Animations API (WAAPI) und der CSS Animations API, um deklarative scrollgesteuerte Animationen zu ermöglichen.
Weitere Demos und Ressourcen
Auf dieser Demowebsite können Sie sich die verschiedenen Implementierungen von scrollgesteuerten Animationen ansehen. Dort können Sie auch Demos mit den neuen APIs von CSS und JavaScript vergleichen.
Wenn Sie mehr über die neuen scrollbaren Animationen erfahren möchten, lesen Sie diesen Artikel und den Vortrag bei der I/O 2023.