Herzlich Willkommen

Ordnet man die Hintergrundbilder nicht der gesamten Seite sondern einzelnen untereinander stehenden Elementen zu und verwendet man dabei noch die Anweisung background-attachment: fixed;, entsteht ein interessanter Effekt. Beim Scrollen bleibt ein Teil des Hintergrunds stehen und ein anderer Teil schiebt sich quasi darüber.

Dieser Effekt, der ebenfalls seit ca. 2010 sehr beliebt ist, nennt sich „Parallax Scrolling”. Er eignet sich am besten für One-Pager, also Webseiten, die nur aus einer langen, nach unten scrollenden Seite bestehen. Manche Webdesigner haben den Effekt mit JavaScript perfektioniert und auf die Spitze getrieben. Das Grundgerüst ist aber ziemlich einfach.

Hinweis: Auf mobilen Geräten funktioniert der Effekt ziemlich schlecht, da diese, um Akku zu sparen, verschiedene Optimierungen beim Scrollen anwenden, die mit background-attachment: fixed; nicht harmonieren. Man sollte den Effekt daher durch ein „Media Query” auf nicht-mobile Geräte beschränken.

Auf wiedersehen!