Im modernen Webdesign sind Hintergründe groß (sowohl wörtlich als auch im übertragenen Sinne). Mit dem Aufkommen von HD-Displays (und jetzt 4K-Displays) erstellen Designer Hintergründe, die viel Bildschirmfläche beanspruchen. Warum? Weil sie für eine unglaubliche visuelle Wirkung sorgen und helfen, eine Geschichte zu erzählen.

Aber Hintergründen steckt so viel mehr, als nur ein Foto oder eine Textur in einen großen Raum zu werfen. Eine Kombination aus CSS und gelegentlichem JavaScript ermöglicht die Erstellung einiger erstaunlicher Spezialeffekte.

Lassen Sie uns einige der einzigartigen Möglichkeiten erkunden, wie Designer Hintergründe aufpeppen. Wir werden auch einen Stift für jede Technik, so dass Sie genau sehen können, wie sie funktionieren.

CSS-Mischmodus Farbwechsel

Was diesen Hintergrundeffekt so cool macht, ist, dass das feste Element oben beim Scrollen des Benutzers die Farbe zu ändern scheint. Die Verwendung der Eigenschaft CSS mix-blend-mode ermöglicht die Änderung des Farbtons, der vom Inhalt des Hintergrunds abhängt.

Scroll-Animation

Diese Technik erinnert an Side–Scroll-Videospiele der Vergangenheit und bietet zwei verschiedene Bilder – jedes scrollt in die entgegengesetzte Richtung. Dies geschieht mit Hilfe von CSS transform und einigen JS.

Schiefe

Schiefe Hintergründe sind einer der heißesten Trends im Webdesign. Es ist ein Effekt, der im Print-Design unglaublich einfach zu implementieren war und im Web mühsam war – bis jetzt. Diese reine HTML / CSS-Lösung macht es zum Kinderspiel.

Bewegte Bilder

Mit einem relativ einfachen CSS-Bit ermöglicht dieser Hintergrund einen reibungslosen Übergang zwischen mehreren Bildern. Es ist ein viel leichterer Schieberegler als herkömmliches JavaScript.

Animierter Farbverlauf

Wenn nicht sorgfältig vorgegangen wird, kann ein animierter Hintergrund von jedem darüber liegenden Inhalt ablenken. Dieses animierte Verlaufsbeispiel ist schön, weil es ein subtilerer Effekt ist. Mit JavaScript können Sie Verlaufsfarben definieren, die zu Ihrer Palette passen.

Unschärfe beim Scrollen

Diese Technik kann sehr nützlich sein, wenn Sie wirklich möchten, dass sich Besucher auf das Hintergrundbild konzentrieren (wie die Kopfzeile eines Nachrichtenartikels) und dann das einfache Lesen von Text darüber ermöglichen. Ein wenig jQuery ändert die background-size Eigenschaft beim Scrollen, um den Effekt zu erzeugen.

Einblendbares Heldenbild mit Overlay

In diesem Beispiel sind einige Dinge im Gange. Erstens wird einem Heldenbild in voller Breite eine Farbüberlagerung hinzugefügt, um einen anderen Farbton zu erzeugen. Dann wird eine Fade-Animation implementiert, um das Bild visuell glatt einzuführen. Schließlich wird dem Mix ein parallaxenartiger Scrolling-Effekt hinzugefügt. Das Ergebnis ist ein sehr modernes Aussehen, das relativ wenig Code (und kein JS) verwendet.

Hintergrund Zoom und Pan

Hier ist ein Effekt, den wir in letzter Zeit ziemlich oft sehen. Wenn der Benutzer mit der Maus über ein Bedienfeld fährt, zoomt und schwenkt das Hintergrundbild zusammen mit allen Bewegungen des Cursors. Es ist eine einfache Möglichkeit, Interaktivität hinzuzufügen und das Interesse der Benutzer aufrechtzuerhalten.

Reveal on Hover

Dieses Beispiel zeigt einen geteilten Bildschirm, bei dem der Hintergrund basierend auf der Position der Maus des Benutzers angezeigt wird. Ideal für Vergleiche, wie ‚vorher‘ und ’nachher‘ Aufnahmen.

Farbwechsel beim Scrollen

Manchmal vergessen wir, wie mächtig die Verwendung einfacher Volltonfarben sein kann. Hier sehen wir die Auswirkungen, die es haben kann, wenn sich die Hintergrundfarben basierend auf der Bildlaufposition ändern. Diese leichte Lösung kann visuell genauso effektiv sein wie schwere Bilder.

Hintergründe im Vordergrund

Hintergründe sind nicht mehr nur ein Mittel zum Rahmen von Inhalten – sie sind jetzt oft Teil des Inhalts selbst. Bei so vielen interessanten Möglichkeiten, sie zu nutzen, lohnt es sich, mit verschiedenen Hintergrundtechniken zu experimentieren und zu sehen, wie sie die Benutzererfahrung Ihres nächsten Projekts verbessern können.