12 wichtige Scroll-To-View-Animation Trends
Animierte Seitenelemente sind auf Zielseiten und Startup-Websites sehr verbreitet. Aber in Designkreisen wird nicht immer darüber gesprochen, weil die Idee von "animate on view" nicht viel abgedeckt wird.
Ich benutze den Ausdruck scroll-to-view, weil es wie eine genaue Beschreibung scheint. Wenn Sie die Seite nach unten scrollen, erscheinen neue animierte Elemente.
Es ist nicht eine Technik, die für jede Website funktioniert, aber es fügt einen netten Touch in bestimmte Layouts hinzu. Und ich habe hier einige meiner Favoriten zusammengestellt, um zu zeigen, wie diese Scroll-to-View-Animationen funktionieren und warum Sie sie möglicherweise selbst verwenden.
1. Morgen Schlaf
Auf der Morgen Schlaf Website werden Sie ein paar ziemlich gutartige animierte Effekte bemerken. Diese verblassen verschiedene Teile von Text und CTAs rund um das Layout.
Interessant ist, dass die meisten Bilder und Hintergrundbereiche auch beim ersten Bildlauf vollständig sichtbar sind. Viele Websites verwenden verblassende Animation, um Bilder und Screenshots anzuzeigen, während der Text sichtbar bleibt.
Dieser kleine Unterschied hilft dabei, die Aufmerksamkeit auf den Text zu lenken, der in Sichtweite gerät. Eine großartige Möglichkeit, die Aufmerksamkeit der Besucher zu gewinnen.
2. Drehen
Eine andere Technik, die ich oft sehe, zielt auf den Großteil des Seiteninhalts für On-Scroll-Animationen ab.
Zum Beispiel die Twist App Homepage Enthält verschiedene Seitensegmente und Textblöcke, die beim Scrollen in und aus der Ansicht animiert werden. Diese haben einen sehr weichen Fading-Effekt, so dass sie spürbar, aber nicht zu hart sind.
Einige Besucher sind vielleicht verärgert über die Verzögerung, aber ich denke nicht, dass es zu lang ist. Außerdem animiert es nur einmal. Wenn Sie also unten auf der Seite klicken, werden alle Animationen ausgeführt.
3. Garn App
Für viel komplexere Animationen sehen Sie sich die Garn-App Lander. Dieser hat mehrteilige Animationen und sogar Elemente, die aus verschiedenen Blickwinkeln in Sicht kommen.
Einige der Screenshot-Demobilder animieren aufwärts, während die begleitenden Text- / BG-Muster in die Ansicht animiert werden. Dieser alternierende Stil ist ziemlich einzigartig und nicht etwas, das ich oft sehe.
Die Startseite ist jedoch auch unglaublich einfach und es gibt nicht viel mehr, um Aufmerksamkeit zu erregen. In diesem Fall funktionieren verschiedene Animationen gut.
4. DashFlow
Von all diesen Beispielen denke ich DashFlow verwendet die gängigsten Animationstechniken.
Dieser Lander animiert Bilder und Text in einer Sitzung. Es ist wirklich einfach und verwendet ein einspaltiges Layout, so dass der gesamte Inhalt linear in einem linearen Pfad fließt.
Nichts Besonderes an diesem Design jenseits der sehr klaren Methode, Elemente auf Scroll zu animieren. Ein toller Stil, wenn Sie eine ähnliche Website haben und die Animationen einfach halten wollen.
5. Quuu fördern
Quuu fördern hält Animationen auf das absolute Minimum und verwendet sie nur in CTA-Bereichen.
Ich kann nicht sagen, ob dies die Conversions erhöht, aber das scheint das Ziel zu sein. Wenn Sie die Seite zum ersten Mal laden, wird die oberste Kopfzeile mit einer kippenden Animation im CTA animiert.
Wenn Sie nach unten scrollen, werden Sie feststellen, dass der Rest der Seite ziemlich statisch ist. Aber unten gibt es ein abschließendes CTA über der Fußzeile, das auch die gleiche neigende Animation animiert und ausführt.
Geht zu zeigen, dass Sie On-Scroll-Animationseffekte haben können, die nicht über die gesamte Seite laufen.
6. Qonto
Die Homepage für Qonto hat eine interessante Sicht auf Scroll-to-View-Animation. Es verwendet die gleiche Art von Animation über die gesamte Website und animiert einzelne Elemente von der Seite in die Ansicht.
Für den Großteil der Seite enthält dies Icon-Bereiche mit einer kleinen Grafik über einigen Inhalten, die die Funktionen der App erklären. Nicht zu subtil, aber auch nicht übertrieben.
Außerdem finden Sie einige andere Animationsstile in der Kopfzeile zusammen mit einigen BG-Bildern, die in die Ansicht eingeblendet werden. Diese Seite ist nur ein schönes Beispiel dafür Webanimation tun können.
7. Wanderung
Ein Beispiel für subtile Animationen finden Sie hier Wanderung .
Ihre Seite wechselt zwischen animierten Elementen und festen Elementen. Die Animationseffekte sind jedoch schnell und Sie sind nicht verärgert, wenn Sie auf sichtbare Inhalte warten.
Dies ist meine Vorliebe für jeden Scroll-to-Animation-Effekt. Es ist immer eine schöne Technik, aber das Timing muss schnell und auf den Punkt gebracht werden. Niemand möchte darauf warten, dass Inhalte in Sicht kommen und Hike versteht dies deutlich.
8. Projekt Fi
Wenn es jemanden gibt, der großartige UX kennt, ist es Google. Und über all ihre Produkte haben sie eine Menge Landing Pages, Projekt Fi Ein Beispiel mit fantastischen Animationen.
Dies gilt nur für Symbole und sie verschwinden nicht in der Ansicht, sondern erscheinen von unten auf der Seite. Beim Scrollen finden Sie Symbole, die für jeden kleinen Abschnitt in die Ansicht verschoben werden.
Es ist ein ziemlich subtiler Effekt, aber es bringt etwas Leben in das Design. Und es basiert ausschließlich auf der Position des Betrachters auf der Seite. Wenn Sie also nach oben scrollen und wieder nach unten gehen, werden Sie von den gleichen Animationseffekten begrüßt.
9. Basis
Das Basis-CRM-Startseite ist ein hervorragendes Beispiel für einfache Animationen bei der Arbeit. Diese Website verwendet benutzerdefinierte Animationseffekte, um Bilder nach oben und in die Augenlinie des Betrachters zu verschieben.
Basierend auf der Anzahl der Zielseiten, die ich täglich sehe, ist dies sehr typisch für das, was ich erwarte. Es ist nicht wirklich eine komplexe Animation, die neu erstellt werden muss, und es beeinflusst die Erfahrung auch nicht zu sehr.
Eine Sache, die ich wünsche, ist, dass die Animationen ein bisschen schneller laden würden. Aber darüber hinaus denke ich, dass dies ein erstklassiges Beispiel für die Animation von Bildern auf Bildlauf mit einem sehr sauberen Layout ist.
10. AnyList
Alle besten mobilen Anwendungen haben ihre eigenen Websites für die Werbung. Und die Besten haben normalerweise einige ziemlich schicke Animationsstile.
AnyList mischt ein paar verschiedene Techniken auf einer Seite zusammen. Ihr Header-Bild wird unterhalb des Cut-Off-Bereichs animiert, ist aber die einzige "bewegliche" Animation auf der Seite.
Alles andere wird nur sichtbar und benötigt eine ziemlich schnelle Ladezeit für die Animation. Diese Techniken werden an anderer Stelle auf der Website verwendet, wodurch sie sich kohärenter anfühlen.
11. Ernest
Der Seitenstil für Ernest ist ein wenig anders als andere Zielseiten, die ich behandelt habe.
Es benutzt Parallax Scroll-Animationen um Bewegung auf einem einzelnen Seitenlayout mit verschiedenen Abschnitten zu erzeugen.
Diese variieren abhängig von der Richtung, in der Sie scrollen, ob Sie sich nach oben oder unten bewegen und mit welcher Geschwindigkeit. Sie variieren auch mit der Intensität basierend auf den verschiedenen Abschnitten der Seite.
Sie können mit dem seitlichen Punktnavigationsmenü navigieren und schnell um die Seite zu verschiedenen Bereichen springen. Es ist eine der wenigen Techniken, die Sie oft auf Parallax-Seiten sehen und es hilft Ernest, sich von der Masse abzuheben.
12. TaxiNet
Um einen Blick auf ganzseitige Animationen in Aktion zu werfen, werfen Sie einen Blick auf die TaxiNet Webseite.
Es ist ein Sammelsurium von scrollbasierten Animationseffekten, die an Symbole, Texte, Bilder und sogar Hintergrundstile gebunden sind. Einzelne Seitenhintergrundfarben animieren den Benutzer zum Sehen, definitiv keine typische Technik, aber sicherlich eine interessante.
Wenn Sie diesen Stil mögen, können Sie einen ähnlichen Ansatz auf Ihre eigene Zielseite anwenden. Achte einfach darauf, dass du die Animationen schnell und schnell behältst, denn niemand möchte warten, bis deine animierten Animationen geladen sind.
Aber wenn Sie es richtig machen, fügen diese Scroll-to-View-Elemente jeder Zielseite einen schönen Effekt hinzu.
