Was ist der Parallax-Effekt?

Beim Parallax-Effekt werden die Objekte im Vordergrund mit einer unterschiedlichen Geschwindigkeit zu den Objekten im Hintergrund verschoben. Das gibt der Website eine dynamik und stellt auf einer kleinen Bildschirmfläche auch Bildausschnitte dar, die ansonsten verborgen bleiben. Normalerweise stören bewegte Inhalte, die sich automatisch in den Vordergrund schieben oder die Seite unruhig wirken lassen. Da der parallax-Effekt aber nur etwas macht, wenn man die Seite bewegt (nach oben oder unten schiebt), erwartet der Betrachter auch eine Reaktion. Solche Effekte stören nicht und lassen eine Website attraktiver erscheinen.

Eigenschaften des Parallax-Effekts

Die Höhe der Bilder hat einen Einfluss auf die Scrollgeschwindigkeit. Je höher ein Bild ist, desto schneller wird es bewegt. So können unterschiedliche Wirkungen erzeugt werden. Das folgende Bild wird im Hintergrund mit einer anderen Geschwindigkeit wie der Vordergrund verschoben.

Der Effekt kann pro Seite problemlos mehrfach eingebaut werden. Bilder im Hochformat sind für diesen Effekt besonders geeignet, weil dadurch ein intensiverer Scroll-Effekt entsteht. Die Höhe des sichtbaren Bereichs (Ausschnitt) kann frei definiert werden.

Einbau des Effektes

Damit dieser Effekt funktioniert, muss bei jeder Position der Parallax-Effekt neu berechnet werden. Bei DropNet übernimmt diese Mathematik ein Widget. Der Einbau gestaltet sich aber extrem einfach. Dem Bild muss nur die Klasse dropapp-parallax zugeordnet werden und schon übernimmt das Widget seine Aufgabe.

<p><img class="dropapp-parallax img-large" src="pinsel.jpg" data-height=”400” alt="" width="1200" height="800" ></p>

Die Klasse img-large zoomt das Bild auf die maximal zur Verfügung stehende Breite.

Parameter	Beschreibung
class=”dropapp-parallax”	Damit wird der Effekt parallax eingebaut.
src=”pinsel.jpg”	Das ist der Pfad zum Bild.
data-height=”400”	Wird dieser Wert angegeben, so ist der sichbare Ausschnitt 400n Pixel hoch. Der Defaultwert ist 300 Pixel.

Rechenleistung und mobile Geräte

Bei den mobilen Geräten ist der Stromverbrauch ein sehr zentrales Thema. Je weniger Strom ein Gerät verbraucht, desto länger hält der Akku. Der parallax-Effekt braucht aber relativ viel Rechenleistung und somit auch viel Strom. Deshalb gibt es mobile Browser auf Smartphones, welche den parallax-Effekt nicht unterstützen. Sie stellen das Bild einfach ohne Animation dar, was auf mobilen Geräten völlig ausreicht.

Mit grossflächigen Bildern ist der Parallax-Effekt besonders attraktiv. So wirkt eine Website extrem viel moderner, ohne mit viel Aufwand alles neu programmieren zu müssen.