Apple ist bekannt für die eleganten Animationen auf seinen Produktseiten. Wenn Sie beispielsweise die Seite nach unten scrollen, können Produkte ins Bild gleiten, MacBooks aufklappen und iPhones drehen sich, während die Hardware präsentiert, die Software demonstriert und interaktive Geschichten über die Verwendung der Produkte erzählt werden.
Schauen Sie sich dieses Video der mobilen Web-Erfahrung für das iPad Pro an
Viele der Effekte, die Sie dort sehen, werden nicht nur in HTML und CSS erstellt. Was dann, fragen Sie? Nun, das kann ein wenig schwierig zu durchschauen sein. Selbst die Verwendung der DevTools des Browsers wird nicht immer die Antwort liefern, da sie oft nicht hinter einem <canvas>-Element sehen kann.
Werfen wir einen eingehenden Blick auf einen dieser Effekte, um zu sehen, wie er erstellt wird, damit Sie einige dieser magischen Effekte in unseren eigenen Projekten nachbilden können. Insbesondere replizieren wir die AirPods Pro Produktseite und den verschiebenden Lichteffekt im Hero-Bild.
Das Grundkonzept
Die Idee ist, eine Animation wie eine Bildsequenz in schneller Abfolge zu erstellen. Sie wissen schon, wie ein Daumenkino! Keine komplexen WebGL-Szenen oder fortschrittlichen JavaScript-Bibliotheken sind erforderlich.
Durch die Synchronisierung jedes Frames mit der Scroll-Position des Benutzers können wir die Animation abspielen, während der Benutzer die Seite nach unten (oder oben) scrollt.
Beginnen Sie mit dem Markup und den Stilen
Das HTML und CSS für diesen Effekt ist sehr einfach, da die Magie innerhalb des <canvas>-Elements stattfindet, das wir mit JavaScript steuern, indem wir ihm eine ID geben.
In CSS geben wir unserem Dokument eine Höhe von 100vh und machen unser <body> 5 Mal so hoch, um die notwendige Scroll-Länge zu erhalten, damit dies funktioniert. Wir passen auch die Hintergrundfarbe des Dokuments an die Hintergrundfarbe unserer Bilder an.
Das Letzte, was wir tun, ist, das <canvas> zu positionieren, zu zentrieren und die max-width und height zu begrenzen, damit es nicht über die Abmessungen des Viewports hinausgeht.
html {
height: 100vh;
}
body {
background: #000;
height: 500vh;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
max-height: 100vh;
max-width: 100vw;
transform: translate(-50%, -50%);
}Im Moment können wir die Seite nach unten scrollen (auch wenn der Inhalt die Höhe des Viewports nicht überschreitet) und unser <canvas> bleibt oben im Viewport. Das ist alles HTML und CSS, was wir brauchen.
Lassen Sie uns nun mit dem Laden der Bilder fortfahren.
Die richtigen Bilder abrufen
Da wir mit einer Bildsequenz (wiederum wie ein Daumenkino) arbeiten werden, gehen wir davon aus, dass die Dateinamen sequenziell aufsteigend nummeriert sind (d. h. 0001.jpg, 0002.jpg, 0003.jpg usw.) im selben Verzeichnis.
Wir schreiben eine Funktion, die den Dateipfad mit der Nummer der gewünschten Bilddatei zurückgibt, basierend auf der Scroll-Position des Benutzers.
const currentFrame = index => (
`https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg`
)Da die Bildnummer eine Ganzzahl ist, müssen wir sie in eine Zeichenkette umwandeln und padStart(4, '0') verwenden, um Nullen vor unserem Index einzufügen, bis wir vier Ziffern erreichen, um unseren Dateinamen zu entsprechen. Wenn Sie beispielsweise 1 in diese Funktion übergeben, wird 0001 zurückgegeben.
Das gibt uns eine Möglichkeit, Bildpfade zu handhaben. Hier ist das erste Bild in der Sequenz, das auf dem <canvas>-Element gezeichnet wird
Wie Sie sehen, ist das erste Bild auf der Seite. An diesem Punkt ist es nur eine statische Datei. Was wir wollen, ist, es basierend auf der Scroll-Position des Benutzers zu aktualisieren. Und wir wollen nicht nur eine Bilddatei laden und sie dann durch das Laden einer anderen Bilddatei austauschen. Wir wollen die Bilder auf dem <canvas> zeichnen und die Zeichnung mit dem nächsten Bild in der Sequenz aktualisieren (aber dazu kommen wir gleich).
Wir haben bereits die Funktion erstellt, um den Bilddateipfad basierend auf der Zahl zu generieren, die wir übergeben. Was wir jetzt tun müssen, ist, die Scroll-Position des Benutzers zu verfolgen und den entsprechenden Bild-Frame für diese Scroll-Position zu bestimmen.
Bilder mit dem Scroll-Fortschritt des Benutzers verknüpfen
Um zu wissen, welche Nummer wir übergeben müssen (und somit welches Bild geladen werden muss) in der Sequenz, müssen wir den Scroll-Fortschritt des Benutzers berechnen. Wir erstellen einen Event-Listener, um das zu verfolgen und einige Berechnungen durchzuführen, um zu ermitteln, welches Bild geladen werden soll.
Wir müssen wissen
- Wo das Scrollen beginnt und endet
- Der Scroll-Fortschritt des Benutzers (d. h. ein Prozentsatz, wie weit der Benutzer auf der Seite nach unten gescrollt hat)
- Das Bild, das dem Scroll-Fortschritt des Benutzers entspricht
Wir verwenden scrollTop, um die vertikale Scroll-Position des Elements zu erhalten, die in unserem Fall die Oberseite des Dokuments ist. Dies dient als Startwert. Den End- (oder Maximal-)Wert erhalten wir, indem wir die Fensterhöhe von der Scroll-Höhe des Dokuments subtrahieren. Von dort aus dividieren wir den scrollTop-Wert durch den maximalen Wert, den der Benutzer nach unten scrollen kann, was uns den Scroll-Fortschritt des Benutzers ergibt.
Dann müssen wir diesen Scroll-Fortschritt in eine Indexnummer umwandeln, die mit der Bildnummerierungssequenz übereinstimmt, damit wir das richtige Bild für diese Position zurückgeben können. Dies können wir tun, indem wir die Fortschrittszahl mit der Anzahl der Frames (Bilder) multiplizieren, die wir haben. Wir verwenden Math.floor(), um diese Zahl abzurunden, und packen sie in Math.min() mit unserer maximalen Frame-Anzahl, damit sie nie die Gesamtzahl der Frames überschreitet.
window.addEventListener('scroll', () => {
const scrollTop = html.scrollTop;
const maxScrollTop = html.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(
frameCount - 1,
Math.floor(scrollFraction * frameCount)
);
});<canvas> mit dem richtigen Bild aktualisieren
Wir wissen jetzt, welches Bild wir zeichnen müssen, wenn sich der Scroll-Fortschritt des Benutzers ändert. Hier kommt die Magie von <canvas> ins Spiel. <canvas> bietet viele coole Funktionen zum Erstellen von allem, von Spielen und Animationen bis hin zu Design-Mockup-Generatoren und allem dazwischen!
Eine dieser Funktionen ist eine Methode namens requestAnimationFrame, die mit dem Browser zusammenarbeitet, um <canvas> auf eine Weise zu aktualisieren, die wir nicht könnten, wenn wir mit reinen Bilddateien arbeiten würden. Deshalb habe ich mich für einen <canvas>-Ansatz entschieden und nicht z. B. für ein <img>-Element oder ein <div> mit einem Hintergrundbild.
requestAnimationFrame passt sich der Bildwiederholrate des Browsers an und ermöglicht Hardwarebeschleunigung durch die Verwendung von WebGL, um es mit der Grafikkarte oder der integrierten Grafik des Geräts zu rendern. Mit anderen Worten, wir erhalten super flüssige Übergänge zwischen den Frames – keine Bildflackern!
Lassen Sie uns diese Funktion in unserem Scroll-Event-Listener aufrufen, um Bilder zu wechseln, während der Benutzer die Seite nach oben oder unten scrollt. requestAnimationFrame nimmt ein Callback-Argument, also übergeben wir eine Funktion, die die Bildquelle aktualisiert und das neue Bild auf dem <canvas> zeichnet.
requestAnimationFrame(() => updateImage(frameIndex + 1))Wir erhöhen den frameIndex um 1, denn während die Bildsequenz bei 0001.jpg beginnt, beginnt unsere Scroll-Fortschrittsberechnung tatsächlich bei 0. Dies stellt sicher, dass die beiden Werte immer übereinstimmen.
Die Callback-Funktion, die wir übergeben, um das Bild zu aktualisieren, sieht so aus
const updateImage = index => {
img.src = currentFrame(index);
context.drawImage(img, 0, 0);
}Wir übergeben den frameIndex an die Funktion. Das setzt die Bildquelle mit dem nächsten Bild in der Sequenz, das auf unserem <canvas>-Element gezeichnet wird.
Noch besser mit Bild-Preloading
Technisch gesehen sind wir an diesem Punkt fertig. Aber mal ehrlich, wir können es besser machen! Wenn Sie zum Beispiel schnell scrollen, kommt es zu einer leichten Verzögerung zwischen den Bild-Frames. Das liegt daran, dass jedes neue Bild eine neue Netzwerkanfrage sendet und einen neuen Download erfordert.
Wir sollten versuchen, die Bilder im Voraus zu laden und neue Netzwerkanfragen zu senden. So ist jeder Frame bereits heruntergeladen, was die Übergänge noch schneller und die Animation noch flüssiger macht!
Alles, was wir tun müssen, ist, die gesamte Sequenz von Bildern zu durchlaufen und sie zu laden
const frameCount = 148;
const preloadImages = () => {
for (let i = 1; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
}
};
preloadImages();Demo!
Ein kurzer Hinweis zur Performance
Obwohl dieser Effekt ziemlich raffiniert ist, sind es auch viele Bilder. Genauer gesagt 148.
Egal, wie sehr wir die Bilder optimieren oder wie schnell das CDN sie liefert, das Laden von Hunderten von Bildern führt immer zu einer aufgeblähten Seite. Nehmen wir an, wir haben mehrere Instanzen davon auf derselben Seite. Dann könnten wir Leistungsstatistiken wie diese erhalten
Das mag für eine Hochgeschwindigkeits-Internetverbindung ohne strenge Datenlimits in Ordnung sein, aber das Gleiche können wir nicht für Benutzer ohne solche Annehmlichkeiten sagen. Es ist eine knifflige Balance zu finden, aber wir müssen uns der Erfahrung aller bewusst sein – und wie sich unsere Entscheidungen auf sie auswirken.
Einige Dinge, die wir tun können, um diese Balance zu finden, sind:
- Laden eines einzelnen Fallback-Bildes anstelle der gesamten Bildsequenz
- Erstellen von Sequenzen, die für bestimmte Geräte kleinere Bilddateien verwenden
- Ermöglichen des Benutzers, die Sequenz zu aktivieren, vielleicht mit einer Schaltfläche, die die Sequenz startet und stoppt
Apple verwendet die erste Option. Wenn Sie die AirPods Pro Seite auf einem mobilen Gerät mit einer langsamen 3G-Verbindung laden, und siehe da, die Leistungsstatistiken sehen schon viel besser aus
Ja, es ist immer noch eine schwere Seite. Aber sie ist viel leichter als das, was wir ohne jegliche Leistungsüberlegungen bekommen würden. So ist Apple in der Lage, so viele komplexe Sequenzen auf eine einzige Seite zu bringen.
Weitere Lektüre
Wenn Sie daran interessiert sind, wie diese Bildsequenzen generiert werden, ist die Lottie-Bibliothek von AirBnB ein guter Ausgangspunkt. Die Dokumentation führt Sie durch die Grundlagen der Erstellung von Animationen mit After Effects und bietet eine einfache Möglichkeit, diese in Projekte zu integrieren.
Nur so ein Gedanke ... wäre es möglich, alle einzelnen Bilder in einer Videodatei zusammenzufassen? Und dann die Wiedergabeposition mit dem Scrollen zu synchronisieren? Wäre das besser oder schlechter für die Gesamtdateigröße? Würde es eine ähnliche oder schlechtere Bildqualität ergeben? Würde es flüssiger animiert werden als die Lösung mit einer Bildsequenz?
Ich habe mir dasselbe gedacht! Es wäre viel besser, nur ein Video herunterzuladen, anstatt 148 Bilder herunterzuladen, das ist wie ein riesiges schreckliches GIF mit 148 HTTP-Verbindungen.
Ich habe versucht, diesen Effekt mit einem Videoelement zu replizieren und die currentTime des Videos mit der Scroll-Position zu synchronisieren, aber das hat mit einem mp4 zu erheblichen Verzögerungen geführt. WebM-Video hat viel besser funktioniert, aber das Format ist in Safari immer noch inkompatibel. Ich habe einen CodePen erstellt, damit Sie es selbst ausprobieren können: https://codepen.io/Maltsbier/pen/dyYmGGq
Es ist sicherlich möglich, eine einzige Videodatei zu verwenden und diese mit der Scroll-Position des Benutzers zu synchronisieren. Ich vermute, die Download-Leistung ist ungefähr ähnlich. Da ich keine Quelldatei von Apple habe, kann ich keinen A/B-Test durchführen, um zu sehen, welches die größere Gesamtdateigröße hat, 148 Bilder oder ein einzelnes Video. Zahar hat Recht, wenn er darauf hinweist, dass dies die Anzahl der HTTP-Anfragen verringern würde, aber mit HTTP/2 können diese alle über eine einzige TCP-Verbindung erfolgen, daher vermute ich, dass es dort nicht viel Leistung zu gewinnen gibt.
Der wichtigste Nachteil von Video, wie Malte demonstriert hat, sind Verzögerungen. Das HTML-Tag für Videos kann
requestAnimationFrame()nicht nutzen, was der wichtigste Faktor ist, um diesen Effekt so flüssig wie möglich zu gestalten. requestAnimationFrame verwendet Ihre Grafikkarte für das Rendering anstelle der CPU und ist im Browser auf 60 Bilder pro Sekunde begrenzt, damit Ihr Computer mithalten kann.In der Vergangenheit habe ich eine Reihe von Ansätzen dazu ausprobiert, und einige davon funktionieren besser als andere. Zusammenfassend lässt sich sagen, dass ein direkter Video-Frame-Seek beim Scrollen nicht so effizient und flüssig funktioniert, wie Sie es sich vorstellen würden (Frame-Drops treten auf; Browser versuchen intern, wiederholte Arbeit zu vermeiden), insbesondere auf mobilen Geräten. Sie können jedoch immer noch mehrere pfiffige Wege finden, ein Video direkt im Browser in Frames zu zerlegen und diese zu verwenden, um Ihre Scroll-Animation zu erstellen. Videos komprimieren im Allgemeinen besser, aber einzelne Bilder erfordern viel weniger Rechenaufwand für den Browser, und mit sorgfältiger Sequenzierung und Vorabladung ist es möglich, dass Sie die Animationssequenz viel schneller starten können als bei einer Videoentpackung. Aspekte der Bildqualität und der Gesamtgröße hängen wirklich von der Detailtreue der Animation ab, die Sie anstreben (Anzahl der Frames, Auflösung).
Ich hoffe, Sie finden diesen Artikel interessant (enthält Demos und Quellcode): https://www.ghosh.dev/posts/playing-with-video-scrubbing-animations-on-the-web/
Um den Größenunterschied zu testen, habe ich selbst Bilder und Videos mit Blender generiert, und die Ergebnisse sind ziemlich eindeutig: 90 Bilder beanspruchen 56 MB, während ein dreisekündiges Video mit 30 fps nur 1,92 MB benötigt.
Im Gegensatz zu dem, was Jurn van Wissen sagte, entscheidet requestAnimationFrame() nicht darüber, was von der GPU beschleunigt wird oder nicht, das liegt am Browser. Aber es macht Updates, die jedes Frame stattfinden sollten, "flüssiger", da es nur vor jeder Neudarstellung aufgerufen wird, wodurch Verarbeitungsleistung gespart wird, indem nicht öfter als nötig aktualisiert wird.
Dies wird natürlich auch vom Video-Element verwendet, wir müssen seine currentTime nicht öfter als jedes Frame einstellen.
Was meiner Meinung nach die Verzögerung verursacht, ist die Interpolation zwischen den Keyframes des Videos. Wie Sie sehen können, sind die oberen beiden Videos, gerendert mit einem Keyframe-Intervall von 1, viel flüssiger als das untere (*), gerendert mit einem Keyframe-Intervall von 20.
Zumindest auf meinem PC. Auf meinem Handy stotterten alle Videos merklich, wobei das VP9/WEBM-Video am besten abschnitt.
Sie haben vielleicht mehr Erfolg, wenn Sie die Techniken kombinieren. Laden Sie es als Video herunter, rendern Sie die Frames in ein Offscreen-Canvas, damit Sie sie extrahiert und bereit haben, sie beim Scrollen auf das On-Screen-Canvas zu zeichnen, wie bei der Bildtechnik.
@Malte Janßen: Korrekt, ich habe das nicht klar genug formuliert. Nicht requestAnimationFrame() ist es, sondern der Browser, der entscheidet, was von der GPU beschleunigt wird. Die Verwendung von requestAnimationFrame() ist nur eine der Möglichkeiten, bei denen der Browser es durch die Nutzung der GPU beschleunigen kann. Es gibt viele Möglichkeiten, diese Animation zu erstellen, und einige der Optionen stützen sich stark auf einen einzigen CPU-Kern, was diese Animation weniger flüssig machen könnte.
@Martin Ansty interessante Idee. Das wirft ein paar Fragen für mich auf.
Wenn Sie Ihre 3 Sekunden Video in einzelne Bilder rendern würden, wären die Bilder dann so viel größer?
Was ist mit dem Archivieren all der Bilder und dem Entpacken mit JavaScript? Sie könnten eine einzelne Datei laden, sie entpacken und die einzelnen Frames rendern.
Wäre es möglich, dass es auf der Höhe des Divs und nicht auf der gesamten Seitenhöhe scrollt?
Demo funktioniert nicht auf Safari iOS 12
Interessant, können Sie mir sagen, was passiert? Wenn es in der CodePen-Demo nicht funktioniert, funktioniert es dann auf der eigenen Website von Apple für Sie?
Ich habe es auf mehreren iOS-Geräten getestet und es funktioniert auf allen flüssig. Sie laufen unter iOS13, aber da Apple diesen Effekt seit ~2014 auf seiner Website verwendet, sollte er auch auf älteren iOS-Versionen problemlos funktionieren.
Ich habe auch das gleiche Problem in IOS Safari, es funktioniert nicht.
Wenn wir von oben nach unten scrollen, gibt es keine Veränderung bei den Bildern.
Bitte, bitte nicht das Scrollen kapern, wie es die schwarze Mülltonnen-Mac-Pro-Seite getan hat.
Ja, das ist schrecklich. Ich habe auch das Gefühl, dass jemand mein Scrollrad kapert und mich daran hindert, tatsächlich zu scrollen!
Könnte ich anstelle von 148 Bildern ein riesiges Bild (Sprite) verwenden, so dass es nur 1 HTTP-Anfrage ist? Und so etwas wie die "steps"-Funktion in CSS-Animationen, aber in Canvas verschieben?
Absolut!
Hier ist ein Beispiel für die Verwendung eines Sprites auf dem Canvas und die Animation der Position: https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3
In diesem Fall ist es wahrscheinlich nicht ideal, diese Methode zu verwenden, da Sie die gesamte Datei herunterladen müssten, bevor Sie dem Benutzer den ersten Frame anzeigen können. Das bedeutet, dass Sie anstatt ein einzelnes 31kb großes Bild herunterzuladen, alle 148 herunterladen müssen, was den anfänglichen Ladevorgang verlangsamen würde. Dies würde jeden Leistungsvorteil zunichte machen, den Sie durch die Verringerung der Anzahl der HTTP-Anfragen erzielen könnten.
Könnten Sie bitte die Vermischung von
requestAnimationFrame()und WebGL aufklären? Der Artikel lässt vermuten, dass die Verwendung von rAF die Bilder mit WebGL auf der GPU rendert, aber der Canvas-Kontext ist einfacher alter 2D. Natürlich ist rAF immer noch nützlich, damit der Browser den Canvas bei jedem Render-Frame aktualisiert; aber es hat nichts mit WebGL zu tun.Es gibt auch die Idee, einfach ein Video zu verwenden, es auf die Seite zu legen und durch Zeitindex-Manipulationen rückwärts und vorwärts abzuspielen. Hier habe ich eine Demo gemacht
https://forums.tumult.com/t/playing-video-in-reverse/17928?u=maxzieb
Es ist nicht perfekt, aber daran könnte man arbeiten.
Vielen Dank für den Artikel, das ist wirklich eine tolle Technik und Sie haben sehr klar erklärt, wie man sie implementiert.
Ein kleines, aber wichtiges Problem, das ich gefunden habe, ist, dass das Setzen von
img.src = currentFrame(index)innerhalb vonupdateImagebei jedem Mal eine neue Netzwerkanfrage auslöst und den Browser-Cache ignoriert (zumindest in Chrome).Meine Lösung ist, die
imgs beim Vorabladen in ein Array zu legen und dann das Bild aus dem Cache zu zeichnen.Ich habe eine Canvas-Animation erstellt und aus Adobe Animate exportiert. Sie ist deutlich kleiner, da sie größtenteils SVG ist, und Animate hat die Animation für die Performance optimiert. Das Einzige, was ich möchte, ist, sie mit der Scroll-Position zu synchronisieren. Wie kann ich das tun?
Mit React
https://codepen.io/AliKlein/pen/dyOqrEB
Feedback willkommen, insbesondere zu Performance-Verbesserungen.
Unter Firefox, wenn ich mit dem obigen CodePen interagiere, dann zu einem anderen Tab im Browser wechsle und dort etwa eine Minute warte und dann wieder durch die Animation scrolle, stottert sie. Kann jemand das Problem reproduzieren?
Denn im Moment hindert mich dieses Problem daran, diesen Effekt auf meiner Website zu verwenden.
Das liegt daran, dass Jurn immer noch einige unnötige Netzwerkanfragen in seinem Code hat (siehe was Jonathan Land geschrieben hat).
Ich ende mit dieser Lösung und sie verhält sich ziemlich reibungslos :-)
Vielen Dank für den Artikel und die Erklärungen!
Ich habe mein eigenes Video in Bilder zerlegt und diesen Code verwendet, um den Scroll-Effekt zu erstellen. Er funktioniert hervorragend, wenn ich lokal entwickle, aber wenn ich ihn deploye, mit Netlify in diesem Fall, wird er abgehackt.
Ich weiß nicht viel über die Speicherung von Assets dieser Größenordnung im Web, aber was könnte die Ruckler verursachen, sobald sie bereitgestellt sind? Ich verwende 212 Bilder, die jeweils ca. 30 KB groß sind. Was könnte ich anders machen, um das Problem möglicherweise zu beheben? Könnte es einfach daran liegen, dass ich die kostenlose Netlify-Bereitstellung verwende, die dieses Volumen an Assets nicht unterstützt? Danke!!
Gibt es eine Möglichkeit, einen Ease-In-Effekt zu den Bildern hinzuzufügen, wenn sie auf dem Canvas gerendert werden, damit die Animation beim Scrollen nicht stoppt?
Wahrscheinlich die Opazität in CSS oder manuell, indem die ersten und letzten paar Frames ausgeblendet werden
Wie würde man dieses JavaScript schreiben, damit die Animation des Canvas erst beginnt, wenn es sichtbar ist?
Dies scheint die Scroll-Fraktion auf der gesamten Seite ständig zu berechnen und den Bild-Frame zu aktualisieren.
Ach, egal, man steckt den Canvas in ein Div und macht den Canvas sticky, jetzt aktualisiert er sich basierend auf dem Scrollen innerhalb des Divs, dank des anderen Beispiels in den Kommentaren! :)
Ich bekomme das nicht zum Laufen. Irgendwelche Hinweise – ich habe es in ein Div gesetzt und das Canvas sticky gemacht, aber es funktioniert immer noch prozentual zum Seiten-Scroll :)
Wenn Sie es in Kombination mit einer Scroll-Bibliothek (z. B. Locomotive scroll js) verwenden möchten, wie steuern Sie dann, dass ein Canvas fest ist??
Ich möchte, dass der Scroll-Effekt beginnt, wenn der Scroll den spezifischen Block erreicht. Welche Änderungen muss ich am Code vornehmen, um das zu erreichen?
Kann mir jemand in diesem Thread zufällig helfen? Ich habe eine dieser Animationen gebaut und sie funktioniert gut, aber ich bekomme ein Flimmern/Stroboskop zwischen den Bildern, während ich scrolle. Hat jemand eine Idee, wie ich das beheben kann?
Die Bildsequenz wird über die gesamte Höhe der Seite abgespielt. Können wir das z. B. für 1000vh machen? Alle Übergänge sind abgeschlossen, und danach fügen wir zusätzlichen Inhalt außerhalb des Canvas hinzu.
Das Problem, mit dem ich konfrontiert bin, ist, dass es über die gesamte Höhe einer Webseite abgespielt wird, sodass ich keinen Inhalt hinzufügen kann, nachdem das Video endet.
Wenn ich die Höhe einer Webseite erhöhe oder verringere, werden die Bilder entsprechend angezeigt, aber sie werden bis zum Ende der Webseite angezeigt.
Können Sie mir bitte helfen?
Ich möchte diese Animation auf 3 Abschnitte auf derselben Seite anwenden.
Welche Änderungen muss ich vornehmen?
Bitte helfen Sie.
Die eigentliche Website von Apple AirPod Pro verwendet
<section>-Tags, um ihre verschiedenen mit Scrollen verbundenen Animationsabschnitte anzupassen. Ich nehme an, Sie würden das einfach tun. Es würde ändern, wie genau Sie JS verwenden, um die CSS jedes Abschnitts zu manipulieren, obwohl ich nicht herausfinden kann, wie Sie es tun würden.
Nur zur Info: Apple verwendet synchronisierte Video-Scrolls auf seinen neueren Produktseiten, aber das hier ist trotzdem großartig zu lernen.
Danke für den Artikel, er ist sehr hilfreich. Ich habe eine Frage. Nach dem Ende dieser Bildsequenz, wie kann ich den Abschnitt verschieben?
Wie entferne ich nach dem Laden des nächsten Frames alle anderen Frames vom Bildschirm?
Hey Jurn. Das ist ein tolles Beispiel, danke, dass du das zur Verfügung stellst. Ich werde an etwas Ähnlichem arbeiten und ich wollte fragen, ob du Tipps hast, wie viele Bilder für jede Sekunde Video exportiert werden sollten?
Danke für deine Hilfe!