Animieren über Parallax und Einblendeffekte
06. Dez 2017
Neben Hintergründen lassen sich auch Inhaltselemente mit individuellen Parallax-Effekten versehen. Während Parallax-Effekte direkt auf Scrollen reagieren, sind Einblendeffekte dann aktiv, wenn ein Inhalt in den sichtbaren Bereich kommt.
Neben Hintergründen lassen sich auch Inhaltselemente mit individuellen Parallax-Effekten versehen. Während Parallax-Effekte direkt auf Scrollen reagieren, sind Einblendeffekte dann aktiv, wenn ein Inhalt in den sichtbaren Bereich kommt.
Die folgende Demoseite zeigt einen kleinen Ausschnitt der Animationsmöglichkeiten, welche über unzählige Kombinationen aus Parallax- und Einblendeffekten erzeugt werden können.
Hintergründen beim Scrollen verschieben
Der Parallax Klassiker, bei dem das Hintergrundbild eingepasst und beim Scrollen wahlweise nach oben oder nach unten verschoben wird. Über den Parallax-Faktor ist die Stärke des Effektes einstellbar. Das Bild selbst muss immer höher sein, als der Inhalt, damit überhaupt ein Parallax-Effekt erreicht werden kann.
Inhalte beim Scrollen verschieben
Auch Inhalte lassen sich beim Scrollen verschieben. Hier können Sie neben der Richtung auch die Geschwindigkeit und Beschleunigung einstellen. Elemente werden dadurch nach außen oder nach innen hin schneller animiert.
Inhalte Einblenden, wenn diese im sichtbaren Bereich erscheinen
Neben Parallax Effekten, die direkt auf Scrollen reagieren, gibt es noch die Möglichkeit, Inhalte erst dann einzublenden, wenn diese in den sichtbaren Bereich scrollen. Hierbei werden ebenfalls mehrere Animationseffekte angeboten, welche, falls sie sich auf den Inhalt beziehen, auch mit Parallax kombinieren lassen.