YiDaoJ's Blog

Parallax Scrolling - ein kurzes Tutorial

Posted on | In |

Technologiekompetenz

Was ist “Parallax Scrolling”?

Unten Parallax Scrolling versteht man die dreidimensionale Bewegungseffekte, bei dem mehrere verschiedene Ebenen mit unterschiedlichen Geschwindigkeiten bewegen, wenn die Webseite scrollt.

Parallax Scrolling basiert auf dem Begriff Bewegungsparallaxe.

Unter Bewegungsparallaxe versteht man in der Wahrnehmungspsychologie den Effekt, der sich optisch ergibt, wenn verschiedene Objekte unterschiedlich voneinander entfernt in einer Landschaft verteilt sind und sich der Beobachter parallel zu diesen Objekten seitlich fortbewegt und dabei in Richtung Horizont blickt.

—- Wikipedia - Bewegungsparallaxe


Abb.1
Abb.1
Wikipedia-Bewegungsparallaxe

Bei diesem Phänomen bewegen sich die entfernte Objekte langsamer als die Objekte, die nah von dem Betrachter liegt. Beispielweise in Abb.1 bewegen sich die Berge horizontal langsamer als die Bäume und Gras, indem die Berge sich entfernter von dem honrizontal bewegenden Betrachter befinden, als die Pflanzen. Gleichzeitig bleibt der Mond und Himmel still als Hintergrund.

Mittels Parallax Scrolling lassen die Nutzer der Webseite ein schönes visuelles Erlebnis von dreidimensionalen Bewegungseffekte erfahren.

Ausprägungsformen

Um die Bewegungseffekte in Webseite einzusetzen, sollen einen stabilen Hintergrund und mehrere bewegliche Container oder Ebene mit entsprechenden Objekten eingeführt. Jede Ebene muss unabhängig voneinander sein und eine verschiedene Bewegungsgeschwindigkeit besitzen. Damit beim Scrolling wird dynamischer Effekt auf der Webseite erstellt. Die Verteilung aller Ebene und Bewegungsgeschwindigkeiten lassen sich mit HTML und CSS schaffen.

Beim Bewegungseffekt spielt das Scrolling der Webseit beziehungsweise Scrollbalken eine wichtige Rolle. Sie steuert es, in wiefern sich die Objekte verschiedener Ebenen bewegen. Die Einsetzung eines Eventlisteners und einer Callback-Funktion in JavaScript ermöglicht diese Steuerung.

Über die datailierte Funktionsweise wird in Technische Grundlagen noch erklärt.

Technische Grundlagen

Verteilung der Ebenen

Die Voraussetzung der Verteilung der Ebenen ist die Erstellung verschiedener Ebene. Gleichzeitig gilt der Hintergrund von body als der stabile Hintergrund der Bewegungsparallaxe.
HTML:

1
2
3
4
5
<body>
  <div id="oben"></div>   
  <div id="mittel"></div>  
  <div id="unten"></div>  
</body>

Das Codestück zeigt, dass drei Container (Ebenen) jeweils mit id “oben“, “mittel“ und “unten“ erstellt werden. Die IDs kennzeichnen einerseits die Positionierung der drei Ebenen aufeinander. Andererseits weisen sie auf die unterschiedliche Bewegungsgeschwindigkeiten diese Ebenen: #oben-Ebene bewegt sich am schnellsten, weil sie sehr nah vom Beobachter liegt; #unten-Ebene bewegt sich selbstverständlich am langsamsten.

Obwohl die Struktur des Codestücks bietet einen Hinweis auf die Positionierung und Reihenfolge aller Ebenen, wird es nun mit Eigenschaft z-index in CSS ermöglicht. Die Eigenschaft z-index bezieht sich darauf, in welcher Reihenfolge Elemente auf dem Ausgabemedium dargestellt werden. Je größer z-index ein Elment besitzt, desto näher liegt es von Beobachter, desto mehr oben befindet es sich in der Struktur der Webseite. Der Wert von z-index muss Integer sein. Beide positive und negative ganze Zahl sind akzeptabel.


Abb.2
Abb.2

Nach der Struktur im Abb.2 wird die Eigenschaften in CSS so umgesetzt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
  margin: 0;
  padding: 0;
  height: 2000px;
  background-color: #1ABC9C;
}
div {
  position: fixed;
  top: 0;
  left: 0;
  ...
}
#oben {
  z-index: 3;
}
#mittel {
  z-index: 2;
}
#unten {
  z-index: 1;
}

Es ist zu beachten, dass die Eigenschaft der Positionierung fixed für alle div-Elemente hinzugefügt wird. Diese Einstellung hat engen Zusammenhang mit der Steuerung der Bewegungsgeschwindigkeiten aller Ebenen. Darüber lässt sich in Steuerung der Bewegungsgeschwindigkeiten noch erzählen.

Steuerung der Bewegungsgeschwindigkeiten

Darstellung und Steuerung verschiedener Bewegungsgeschwindigkeit jeder Ebene gehört zum Schlüssel vom Bewegungseffekt.
Beispielweise wenn der Nutzer die Webseite nach unten um eine bestimmte Länge von Strecke scrollt, dann bewegt Körper der Webseite sich nach unten auch um die gleichlange Strecke. Alle andere Ebenen bewegen sich nach unten nicht um diese gleichlange Strecke sondern um drei verschiedene Kürzere. Auf diese Weise werden unterschiedliche Bewegungsgeschwindigkeiten dargestellt und Dynamik geschaffen.

Aber wie kann die verschiedene Länge von Strecke beim Scrollen ermöglicht? Lassen wir uns den Code von JavaScript ansehen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Callback-Funktion 
function parallaxScroll(){
  // Eine Variable deklarieren, um die aktuelle vertikale Position innerhalb der Seite zu speichern
  var scrolled = window.pageYOffset;
  
  /* Die Werte der CSS-Eigenschaft "top" von 3 Container/ Ebenen lassen sich 
    durch JavaScript im Lauf des Scrollen verändern.
    Wenn der Wert der CSS-Eigenschaft "top" immer kleiner wird, bewegt sich das entsprchende 
    Element immer nach oben.
  */
 
  // schnell bewegen
  document.getElementById('oben').style.top = (0-(scrolled*0.7))+'px'; 
  document.getElementById('mittel').style.top = (0-(scrolled*0.4))+'px';
  // langsam bewegen
  document.getElementById('unten').style.top = (0-(scrolled*0.2))+'px';
}
// Eventlistener dient zur Beobactung der Bewegung beim Scrollen. 
// Wenn Event "scroll" ausgelöst wird, lässt sich die Callback-Funktion parallaxScroll() aufrufen.
window.addEventListener('scroll', parallaxScroll);

Wenn die Webseite beispielweise um 1000px gescrollt wird, ist der Wert von window.pageYOffset 1000. Dann sind die Werte der top-Eigenschaft von #oben, #mittel und #unten jeweils -700px, -400px und -200px. Das heißt bewegen sich die drei Ebenen jeweils um 700px, 400px und 200px. Bei jedem Scrollen bewegen sich der Körper und drei Ebenen um verschiedene lange Strecke, was zum Bewegungsparallaxe-Effekt führt.


Abb.3
Abb.3

Die Steuerung der verschiedenen Bewegungsstrecken wird wie oben eingesetzt, vorausgesetzt, dass die postion-Eigenschaft dieser Ebene fixed eingestellt. Auf dieser Weise bewegen sich diese Ebenen selber nicht spontan mit Maus-Scrollen, sondern die Position der Ebene hängt sich von der Callback-Funktion ab, die von Event scroll ausgelöst wird.

Erklärung des Demonstrators

Zum eigenen Demonstrator erstelle ich eine Webseite, die eine vertikale Szene von Unterwasserwelt darstellt.

Demo hier

Struktur schaffen

Die Darstellung der Szene besteht aus vier Teilen: blaues Meer als Hintergrund und drei Ebene jeweils für Fischschwarm, Bubbles und einzelne Fische. Der Fischschwarm befinden sich am entferntesten von dem Betrachter und bewegen sich selbstverständlich am langsamsten. Die einzelne Fische sind ganz nah vom Betrachter und bewegen sich am schnellsten. Die Ebene der Bubbles liegt zwischen die oben genannten Ebenen.

Ein Stück der Szene ist auszuwählen, um die Struktur der Ebenen klar zu zeigen.


Abb.4
Abb.4

Gemäß der Struktur wird die folgende HTML- und CSS-Dokument erstellt.

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<body>
  <!-- oben Fisch -->
  <div class="parallax_bg" id="level1">
    <!-- Elemente auf dieser Ebene -->
    <div id="level1_1">
      <!-- Hier wird nun ein Bild als Beispiel hinzugefügt -->
      <img src="img/fish1.png">
    </div>
    <!-- Um die Plätze zu sparen lassen sich nun div-Container mit entsprchende id eingegeben. -->
    <div id="level1_2"></div>  
    <div id="level1_3"></div>  
    <div id="level1_4"></div>  
    <div id="level1_5"></div>  
    <div id="level1_6"></div>
    <div id="level1_7"></div>
    <div id="level1_8"></div>  
  </div>
  <!-- mittel Bubbles -->
  <div class="parallax_bg" id="level2">
    <!-- Elemente auf dieser Ebene -->
    <div id="level2_1">
      <img src="img/bubble2.png">
    </div>
    <div id="level2_2"></div>
    <div id="level2_3"></div>
    <div id="level2_4"></div>
    <div id="level2_5"></div>
  </div>
  <!-- unten Fischschwarm -->
  <div class="parallax_bg" id="level3">
    <!-- Elemente auf dieser Ebene -->
    <div id="level3_1">
      <img src="img/fishes1.png">
    </div>
    <div id="level3_2"></div>  
    <div id="level3_3"></div>  
    <div id="level3_4"></div>  
  </div>
</body>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
body {
	margin: 0;
	padding: 0;
    /* insgesamte Höhe der Webseite einstellen */
	height: 3440px;	
    /* Blaues Meer als Hintergrund, 
        synchronische Bewegung mit gleiche Geschwindigkeit beim Scrollen 
    */
	background: url("img/undersea2.jpg");
}
/* ======= allgemeine Eigenschaften der drei Ebenen einstellen ======== */
.parallax_bg {
    /* wichtige Einstellung für Positionierung: fixed */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3440px;
	overflow: hidden;
}
img {
	position: absolute;
}
/* ========= Reihenfolge und Positionierung der Ebenen explizit einstellen ======== */
/* oben */
#level1 {
	z-index: 5;
}
/* mittel*/
#level2 {
	z-index: 3;
}
/* unten*/
#level3 {
	z-index: 1;
}
/* ======== Bild-Elemente auf jeder Ebene einstellen ======== */
/* Um Plätze zu sparen ist für jeder Ebene nun ein Bild als Beispiel einzusetzen. */
/* level1 images*/
#level1_1 img{
	top: 180px;
	left: 50px;
	width: 250px;
	height: auto;
}
/* level2 images*/
#level2_1 img {
	top: -30px;
	left: 300px;
	width: 30%;
	height: auto;
	opacity: .5;
}
/* level3 images */
#level3_1 img {
	top: -120px;
	right: 50px;
	width: 40%;
	opacity: .8;
}


Steuerung der Bewegungsgeschwindigkeiten

Anschließend kommt die Steuerung der “Bewegungsgeschwindigkeiten” jeder Ebene in JavaScript.
JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Callback-Funktion 
function parallaxScroll(){
    // Eine Variable deklarieren, 
    // um die aktuelle vertikale Position innerhalb der Seite zu speichern.
	var scrolled = window.pageYOffset;
    // Die aktuelle vertikale Positionswert ist auf Konsole auszugeben,
    // um die Daten und der Funktion zu überprüfen.
	console.log(scrolled);
  
    /*    
      1. Die Werte der CSS-Eigenschaft "top" von 3 Container/ Ebenen lassen sich 
         durch JavaScript im Lauf des Scrollen verändern.
      2. Wenn der Wert der CSS-Eigenschaft "top" immer kleiner wird, bewegt sich 
         das entsprchende Element immer nach oben.
      3. Die aktuelle vertikale Positionswerte aller Ebenen werden auf Konsole 
         ausgegeben, damit könnten die Bewegungsstrecken jeder Ebene beim Scrollen 
         anschaulich erfahren werden. 
    */
	// schnell
	document.getElementById('level3').style.top = (0-(scrolled*0.2))+'px';
	console.log('level3: ' + document.getElementById('level3').style.top);
	// mittel
	document.getElementById('level2').style.top = (0-(scrolled*0.4))+'px';
	console.log('level2: ' + document.getElementById('level2').style.top);
	// langsam
	document.getElementById('level1').style.top = (0-(scrolled*0.7))+'px'; 
	console.log('level1: ' + document.getElementById('level1').style.top);
}
// Eventlistener dient zur Beobactung der Bewegung beim Scrollen. 
// Wenn Event "scroll" ausgelöst wird, lässt sich die Callback-Funktion parallaxScroll() aufrufen.
window.addEventListener('scroll', parallaxScroll);



Wenn der Besucher die Maus scrollt, wird Event scroll ausgelöst. Die auszugebene Daten lassen sich auf Konsole gezeigt.


Abb.5
Abb.5

Aus der Abb.5 ergibt sich die Schlußfolgerung, dass bei jedem Scrollen, die obere / nahe Ebene sich immer eine längere Strecke bewegt, als die untere / entfernte Ebene. Dadurch sieht es aus, dass die Elemente sich auf der Webseite mit verschiedenen Geschwindigkeiten bewegen. Daher hat die Besucher ein visuelles Erlebnis von Bewegungsparallaxe.

PS: Alle Bilder in Demo sind aus Internet.