Advertisement
  1. Web Design
  2. Parallax Scrolling
Webdesign

Erstelung eines maskierten Hintergrundeffekt mit CSS

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Final product image
What You'll Be Creating

Heute werden wir eine wirklich coole Technik durchlaufen, mit der Sie einen Effekt erzeugen können, der ein bisschen wie Parallax-Scrolling ist, jedoch kein JavaScript benötigt. Dies kann sehr einfach durch reines CSS erreicht werden.

Sehen Sie sich zunächst die Live-Demo an, um zu erfahren, was Sie lernen werden (Sie müssen auf einem Desktop / Laptop sehen, um den Effekt zu sehen).

Diese Technik kann verwendet werden, um großartige Produktbeschreibungsseiten oder etwas ähnliches zu erstellen, das einer Powerpoint- / Keynote-Präsentation ähnelt, und wäre ein großes Potenzial für die Darstellung von Online-Geschichten.

Das ist alles, was wir schaffen werden

Es ist alles im CSS

Der Schlüssel zu dieser Technik ist der CSS background-attachment:fixed;der seit CSS 2.1 verfügbar ist. Jedes Hintergrundbild, auf das dieses Styling angewendet wird, bleibt relativ zum Fenster in einer festen Position (nicht das Element, auf das es angewendet wird).  Wir werden es verwenden, um unsere Illustrationen beizubehalten, während unsere Inhalte unabhängig voneinander blättern.

Bei dieser CSS-Eigenschaft müssen Sie beachten, dass die Hintergrundbilder relativ zum Fenster fixiert werden und ihre Position nicht durch Ränder beeinflusst wird, wie dies bei einem regulären Hintergrundbild der Fall wäre.

Sie sollten auch wissen, dass die Eigenschaft zwar in allen Desktop-Browsern hervorragend funktioniert, in Chrome Mobile jedoch derzeit nicht funktioniert und in anderen mobilen Browsern etwas ruckartig wirkt.  Während Ihre Besucher Ihre Bilder dennoch gut sehen können, ist der Bildlaufeffekt am besten auf Desktop-Plattformen zu sehen.

Wie es gemacht hat

Die grundlegenden Schritte, um das zu erreichen, was Sie in der Demo sehen, sind:

  1. Erstellen Sie ein Containerelement und fügen Sie Ihren Inhalt hinzu.
  2. Stellen Sie den Container (in unserem Fall ein div) so ein, dass die Polsterung auf einer Seite etwa 50% breit ist, sodass der Inhalt auf die andere Seite verschoben wird.
  3. Fügen Sie ein Hintergrundbild mit einer Breite von etwa 50% hinzu und positionieren Sie es auf der dem Inhalt gegenüberliegenden Seite.
  4. background-attachment: fixed; und schauen Sie die Scroll-Magie an!

Lassen Sie uns durchgehen, wie dies alles Schritt für Schritt geschieht.  Sie müssen sich die Quelldateien für dieses Tutorial holen, damit Sie über die erforderlichen Bilder verfügen.

1. Grundeinrichtung

Erstellen Sie zunächst einen Projektordner und fügen Sie ihm eine index.html-Datei sowie einen css-Ordner mit einer hinzugefügten Datei namens style.css hinzu.  Kopieren Sie die vier Bilder aus der heruntergeladenen Quelldatei-ZIP-Datei in einen Ordner mit dem Namen images.

Fügen Sie diesen HTML-Code zu index.html hinzu:

Was wir hier tun, ist das Einrichten unserer grundlegenden HTML-Shell, das Laden in unser Stylesheet und einige Google-Fonts. Anschließend wird der erste div-Inhaltscontainer erstellt, auf den wir diese Technik anwenden.

Der div Container hat drei Klassen:

  1. .content - das verwendet, um einige Eigenschaften festzulegen, die für alle Inhaltscontainer gelten.
  2. .right - gibt an, dass dieser Container einen rechtsbündigen Inhalt haben soll (später arbeiten wir auch mit einem linksbündigen Container)
  3. .illustration_01 - das verwendet, um das spezifische Hintergrundbild und die Farbe für diesen Container festzulegen

Styling

Jetzt sind wir bereit für ein paar CSS. Fügen Sie Ihrer style.css-Datei zunächst einige grundlegende Normalisierungs- und Formatierungscodes hinzu:

Nun zur Klasse .content.  Fügen Sie dies am unteren Rand Ihres Stylesheets hinzu:

In dieser Klasse geschieht der größte Teil der Magie.  Für den Text legen wir Schriftgröße und Farbe fest. Für den Hintergrund sehen Sie, dass wir background-size auf 49% automatisch setzen.

Dies bedeutet, dass das Hintergrundbild immer gedehnt oder verkleinert wird, um 49% der Seitenbreite auszufüllen, und die Höhe wird proportional angepasst.  Wir verwenden einen Wert von 49% anstelle von 50%, da Firefox ansonsten ein seltsames Linienartefakt in der Mitte des Bildschirms anzeigt.

Wir legen dann background-fixed, der, wie Sie bereits aus der Beschreibung oben wissen, das Hintergrundbild beim Scrollen beibehalten und seine Position relativ zum Fenster und nicht zum Container, auf den es angewendet wird, festlegt.

Zum Schluss setzen wir background-repeat: no-repeat;, dass unser Bild nur einmal auf der Seite erscheint.

Als nächstes fügen Sie die .right-Klasse zu Ihrem Stylesheet hinzu:

Diese letzte Klasse platziert den Textinhalt auf einer Bildschirmhälfte und das Hintergrundbild auf der anderen.

Die Einstellung für background-position gibt dem Hintergrundbild an, sich auf der linken Seite des Fensters mit null Pixeln zu positionieren und sich vom oberen Rand des Fensters halb nach unten auszurichten.

Fügen Sie schließlich die Klasse .illustration_01 hinzu:

Dies legt das spezifische Hintergrundbild und die Farbe fest, die wir für diesen Inhaltscontainer wünschen.

Überprüfen Sie Ihre Website und Sie sollten jetzt Folgendes sehen:

Wenn Sie nach unten scrollen, müssen Sie sehen, dass der Inhalt entlang des Bildes verschoben wird.

2. Fügen Sie einen zweiten Container hinzu

Fügen wir einen weiteren Inhaltscontainer hinzu, diesen mit links ausgerichtetem Inhalt.

Fügen Sie den HTML-Inhalt des Inhaltscontainers unter Ihrem letzten div hinzu:

Beachten Sie, dass wir diesmal die Klasse .left anstelle von .right verwenden und die Illustrationsnummer erhöht haben, sodass die Klasse .illustration_01 durch .illustration_02 ersetzt wird

Fügen Sie Ihrem Stylesheet die folgenden zwei neuen Klassen hinzu:

Diesmal haben wir die Auffüllung von 50% auf der rechten Seite des Containers, so dass der Inhalt nach links verschoben wird und der Hintergrund horizontal bei 100% positioniert ist, d. H. Ganz nach rechts.  Wir fügen dem Hintergrund dieses Containers auch eine andere Farbe und ein anderes Bild hinzu.

Überprüfen Sie Ihre Website erneut, und scrollen Sie nach unten.llt.  Wenn Sie das Ende des ersten Containers erreicht haben, sollten Sie sehen, dass der zweite auftaucht, über Ihrem ersten Bild schrubbt und allmählich Ihr zweites enthü

3. Insert ein Trennzeichen 

Es verbessert die Wirkung dieser Technik, wenn sich zwischen den beiden Containern ein Trennzeichen befindet. Fügen wir das jetzt hinzu.

Fügen Sie zwischen Ihren beiden Container-Divs diesen HTML-Code hinzu:

Fügen Sie Ihrem Stylesheet die Klasse .separator hinzu:

Wenn Sie Ihre Site aktualisieren, sollten Sie jetzt ein schönes Trennzeichen zwischen Ihren Containern haben:

4. Dritter und vierter Container

Sie können jetzt den Code für Ihre verbleibenden Trennzeichen und Inhaltscontainer eingeben.

Fügen Sie diesen HTML-Code unter Ihren vorhandenen divs hinzu:

Und dieses CSS zu Ihrem Stylesheet:

Sie müssen jetzt Ihre gesamte Anzeige an Ort und Stelle haben, wobei ein dritter und vierter Inhaltscontainer Folgendes anzeigen:

Sowie einen letzten Separator zum Abschließen:

5. Machen Sie es ansprechend

Das letzte, was Sie tun müssen, ist, unterschiedliche Bildschirmgrößen zu berücksichtigen.  Wenn das Ansichtsfenster zu klein wird, um unsere Hintergrundbilder bequem unterzubringen, möchten wir sie stattdessen auf Inline-Bilder umstellen.

Fügen Sie am oberen Rand jedes Inhaltscontainers, in den ersten divs und oberhalb des Textes eine Figur mit der Klasse .smallscreen ein, und platzieren Sie in diesem Platz ein img-Tag, um jedes der aktuell in den Hintergründen verwendeten Bilder zu laden:

Erster Inhaltscontainer:

Zweiter Inhaltscontainer:

Dritter Inhaltscontainer:

Vierter Inhaltscontainer:

Wir werden die .smallscreen-Klasse verwenden, um dieses Inline-Bild standardmäßig auszublenden, aber bei einer kleineren Bildschirmgröße anzuzeigen.

Fügen Sie Ihrem Stylesheet die folgende Klasse hinzu:

Wir fügen nun die Medienabfragen hinzu, die behandeln, ob Hintergrund- oder Inline-Bilder angezeigt werden.  Sie verkleinern auch schrittweise die Größe des Texts und des Abstandes im Layout, sodass wir die Einstellungen in allen Ansichtsfensterräumen gut anpassen.

Fügen Sie diese Medienabfragen zu Ihrem Stylesheet hinzu:

Bei den ersten vier Medienabfragen werden die Textschriftgröße und das Auffüllen in den Inhaltscontainern schrittweise auf die verfügbare Bildschirmbreite angepasst.

In der fünften Medienabfrage von max-width: 50rem enthalten wir Code, der die .smallscreen-Klasse sichtbar macht, unsere 50% -ige Seitenauffüllung aus den Inhaltscontainern entfernt und die Hintergrundbilder verbirgt.  Wenn diese Medienabfrage eintritt, werden die großen festen Hintergrundbilder nicht mehr angezeigt. Stattdessen werden reguläre Bilder oben in jedem Inhaltscontainer angezeigt.

Wenn Sie nun Ihre Site aktualisieren, sollten Sie sehen, dass sie mit allen Breiten des Ansichtsfensters reibungslos verkleinert wird, bis Sie dies in seiner kleinsten Größe sehen:

Schlusswort

Selbst nach so vielen Jahren der Arbeit mit CSS bin ich immer wieder überrascht, dass immer mehr tolle Dinge damit zu tun sind. Und je einfacher die Technik ist, desto beeindruckender ist sie.

Versuchen Sie dieses kleine Juwel aus, es ist so schnell und einfach, dass Sie wahrscheinlich süchtig werden!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.