Animieren über Parallax und Einblendeffekte

06.12.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.

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.