Tutorial: Wie erstellt man einen Parallax-Effekt mit CSS

Parallax gehört zu einem der beliebtesten Effekte in Webdesign. Er lässt das Hintergrundbild mit einer geringeren Geschwindigkeit im Vergleich zu dem Vordergrundbild bewegen, wenn man die Seite nach unten scrollt. Auf diese Weise verleiht er den Seiten das Gefühl von Tiefe und lässt sie dynamischer aussehen.

Parallax kann sowohl für einzelne Bilder als auch für das gesamte Layout der Website verwendet werden. Es ist durchaus eine universelle Lösung für jedes Projekt. Werft bitte einen Blick auf die folgenden Beispiele:

Intacto

Hier ist ein großartiges Beispiel für eine interaktive Zeitleiste-Seite. Es sieht ziemlich cool stellt eine dynamische großartige Lösung zur Präsentation des "Über Uns" Bereich der Website dar.

Graphicnovel

Eine Comics-Seite von Peugeot Unternehmen ist eine weitere gute Alternative, um neue Produkte einem breiteren Publikum vorzustellen. Das Unternehmen hat eine kurze Geschichte kreiert, um für ihr Hybrid-Modell zu werben.

SoleilNoel

Eine attraktive und zugleich schnelle Website mit sanftem Parallax-Scrolling. Diese Art von Layout wird großartig für Portfolio und Landeseiten funktionieren.

Sieht ziemlich cool aus, nicht wahr? Lasst uns nun einen Blick darauf werfen, wie wir den gleichen Effekt selbst erstellen und in jedes Eurer Projekte integrieren können. Also, im Grunde kann man Parallax-Scrolling mit Hilfe von JavaScript und mit CSS erstellen.

Wo liegt der Unterschied?

Nun, Ihr werdet keinen großen Unterschied auf einem einzigen Bild erkennen können. Die Websites, die mehrere Parallax-Scrolling Features enthalten, laden einfach viel langsamer, wenn sie mit jQuery gebaut sind. Zur gleichen Zeit ist der CSS basierende Parallax-Effekt schwieriger an das Ansichtsfeld des Browsers anzupassen. Also lasst uns diese Methode jetzt genau anschauen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="parallax_section parallax_image_first">
  <div class="center">
    <article>Some text  </article>
    </div>
  </div>
<!--Block with content--> 
<div class="content_block">
  <div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.</div>
</div>
<div class="parallax_section parallax_image_second">
  <div class="center">
    <article>Some text  </article>
    </div>
  </div>
<!--Block with content--> 
 
<div class="content_block">
 
<div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.</div>
 
</div>

Lasst uns nun mit der CSS-Datei fortfahren. Wir müssen die .parallax_section anpassen. Gebt bitte eine richtige Höhe und andere Attribute wie, Hintergrund-Anhang, Position und Größe ein. In meinem Fall wird es folgenderweise aussehen:

1
2
3
4
5
6
7
8
.parallax_section{
	height: 600px;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
  	background-position: 100% auto;
		position:relative;
}

Als nächstes setzten wir das gewünschte Bild ein. Dafür werden wir einen weiteren Selektor verwenden - .parallax_image_first. Fügt bitte den Pfad der Datei hinzu.

1
2
3
.parallax_image_first{
	 background-image: url("../images/del/diagonal_background.jpg");
}

Schließlich lasst uns Stile zum Text auf dem Bild hinzufügen.

1
2
3
4
5
6
7
8
9
    font-size: 60px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 600;
    color: #fff;

Es wird ungefähr so aussehen:

DEMO | DOWNLOAD

Parallax mit JavaScript

Nun lasst uns Parallax-Scrolling mit JavaScript bauen. Dafür werden wir ein gebrauchsfertiges jQuary Plugin von pixelcog.com verwenden. Es ist eigentlich eines der einfachsten Plugins, mit denen ich gearbeitet habe. Damit es funktioniert, müsst ihr die jq Bibliothek herunterladen. Kopiert die parallax.min Datei in Euer Projekt und fügt den HTML-Code ein.

Nun müssen wir ein Bild hinzufügen. Dafür verwenden wir einen Teil vom fertigen Code.

Gebt die Angaben in die CSS-Datei ein:

1
2
3
4
.parallax-window {
    min-height: 400px;
    background: transparent;
}

Ändert den Text und seht Euch die Vorschau der Seite an. Ihr könnt auch die Optionen des Bildes direkt im HTML-Code ändern. Aus diesem Grund müssen wir ein Datenpräfix der Variable hinzufügen und es im unteren Container eintippen, z.B., wenn wir die Scroll-Geschwindigkeit ändern möchten, fügen wir die Daten-Geschwindigkeit = "0.8" in HTML ein.

Wie Ihr sehen könnt, sieht es viel deutlicher mit dem Skript aus und erfordert weniger vom Hand geschriebenen Code. Also, wenn der Abbildungsmaßstab für das Projekt von entscheidender Bedeutung ist, die Verwendung von Skript eine gute Wahl - in allen anderen Fällen könnt Ihr alles mit CSS tun.

DEMO | DOWNLOAD

Es gibt auch eine Vielzahl von anderen Parallax-Skripts im Internet, erzählt doch gern, welche Ihr bevorzugt. Teilt Eure Ideen in den Kommentaren und lasst mich wissen, wenn ich etwas missverstanden habt.

Quelle: How to Create Parallax Effect with Pure CSS von Alex Samoylenko