Anwendungsfälle für feste Hintergründe in CSS

Ordnen Sie dies in die Kategorie persönlicher "CSS Ah-Ha Momente" ein.

Die Eigenschaft background-attachment war für mich nie sonderlich nützlich. Ich habe sie immer als eine Art altmodischen Design-Trick aus der GeoCities-Ära betrachtet, um einen sich wiederholenden Hintergrund während des Scrollens an Ort und Stelle zu halten.

Siehe den Pen QEPQqp von Geoff Graham (@geoffgraham) auf CodePen.

Es stellt sich heraus, dass ein Hintergrund mit fester Position weitaus nützlicher sein kann. Das Hinzufügen der einzelnen Zeile background-attachment: fixed; zu einem Element kann uns tatsächlich Macht verleihen, um sanfte, anmutige Übergänge zwischen Inhalten zu schaffen, die das Benutzererlebnis verbessern, ohne weitere Abhängigkeiten wie Javascript oder intensive Animationen.

Die Faux-Folienpräsentation

Erstellen Sie eine Präsentation? Eine einzelne Seite, die in „Folien“ unterteilt ist, ist ziemlich einfach.

.slide {
  background-image: url('path-to-url');
  background-attachment: fixed;
  height: 100vh;
  width: 100%;
}

Wenn wir das .slide-Element dreimal in unserem HTML aufrufen, haben wir Folien, die sich beim Scrollen nach unten zu überlappen scheinen.

Siehe den Pen Scrolling Backgrounds in CSS – 01 von Geoff Graham (@geoffgraham) auf CodePen.

Keine Bibliotheken. Kein Scroll-Jacking. Reines CSS mit voller Browserunterstützung (nun ja, außer Touchscreens). Könnte eine lustige Sache sein, mit CSS Scroll Snap Points zu kombinieren.

Der "Slide Over The Header" Header

Nehmen wir an, wir wollten eine schicke Kopfzeile, die von Inhalt überlagert wird. Das können wir auch tun.

Siehe den Pen akrJjY von Geoff Graham (@geoffgraham) auf CodePen.

Die Faux-Transparenz

Erinnern Sie sich, als Klassenzimmer Overheadprojektoren hatten und Lehrer Transparenzen erstellen mussten, um geschichtete Informationen zu präsentieren? Das können wir auch!

Siehe den Pen Scrolling Backgrounds in CSS – Seattle Trip von Geoff Graham (@geoffgraham) auf CodePen.

Weitere großartige Beispiele

Es gibt noch viele weitere großartige Beispiele dafür in Aktion auf CodePen. Hier sind ein paar zum Genießen.

Schiebende Paneele am Anfang (aber auch in der Mitte) eines Artikels

Siehe den Pen RRJWAA von Shane Zentz (@szentz) auf CodePen.

Abgewinkelte und transparente überlappende Abschnitte

Siehe den Pen skewroll von carpe numidium (@carpenumidium) auf CodePen.

Scrolling Flipbook

Siehe den Pen Scroll Flip-Book von Derek Palladino (@derekjp) auf CodePen.

Mid-Artikel-Hintergrund-Header-Breaks

Siehe den Pen vKOvgJ von Sam Stevenson (@samstevenson) auf CodePen.

Abgeschnittene Header in festen Panels

Dieses verwendet zwar nicht tatsächlich background-attachment, ist aber sehr cool und ein verwandter Effekt.

Siehe den Pen Gettin’ Clippy von Stephen Scaff (@StephenScaff) auf CodePen.