Animationen mit skrollr

Modernes Webdesign: Parallax Effekte mit ScrollrWebdesign mit Parallax-Effekt, animiertes One Page Webdesign, Überblendungen, Farbeffekte und mehr

Ein beliebter Effekt im Webdesign ist der Parallax-Effekt. Beim Parallax-Effekt verschieben sich verschiedene Ebenen gegeneinander. Je weiter hinten die Ebene liegt, desto schneller bewegt sie sich (angelehnt an den in der Natur zu beobachtenden Parallax-Effekt).

Der Effekt ist an das Scrollen des Nutzers/Besuchers gekoppelt. In diesem Beitrag zeigen wir euch, wie man den Parallax-Effekt mithilfe der JavaScript-Bibliothek skrollr einfach im eigenen Webdesign umsetzen kann.

Im Netz sind viele Variationen des Effekts zu finden. Wenn ihr euch über den Parallax-Effekt und dessen Programmierung informiert, werdet ihr schnell auch auf die JavaScript-Bibliothek skrollr von Alexander Prinzhorn stoßen. Wer jetzt die Hände über dem Kopf zusammen schlägt und sagt „Ich kann aber kein JavaScript“ den können wir beruhigen.

Nötige Programmierkenntnisse: lediglich HTML5 und CSS3, oder noch einfacher gesagt: theoretisch nur die Grundlagen von HTML und CSS.

Zur Projekthomepage und Download:
https://github.com/Prinzhorn/skrollr

Mit skrollr lassen sich übrigens nicht nur Parallex-Effekte einfach erstellen. Die Library bietet jede Menge Möglichkeiten, eure Website aufzupeppen.

Hier ein paar Beispiele:

Noch mehr Beispiele für den Einsatz von skrollr findet ihr hier:

https://github.com/Prinzhorn/skrollr/wiki/In-the-wild

Habt ihr euch durch die Links geklickt und seid neugierig geworden?

Dann legen wir mal los.

skrollr-Grundlagen

skrollr kann auf jeder Seite eingebunden und genutzt werden. Hierfür muss nur die Bibliothek vor dem schließenden <body>-Tag eingebunden und aufgerufen werden:

1
2
3
4
<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
	var s = skrollr.init();
</script>

Nun müssen wir die Elemente definieren, die Animiert werden sollen.

Diese legt ihr in einen div-Container, dem ihr die ID „skrollr-body“ zuweist. Die „spacer“ im folgenden Beispiel sind nur da, damit das animierte Element nicht aus dem Sichtfeld verschwindet, bevor es sich ändert. Zu beachten ist noch, dass der body-Bereich eine gewisse Mindesthöhe haben sollte, sonst kann nicht gescrollt werden.

DEMO = http://prinzhorn.github.io/skrollr/examples/docu/1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="skrollr-body">
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
spacer<br>spacer<br>
	<div id="foo" data-0="background-color:rgb(0,0,255);" 
		data-500="background-color:rgb(255,0,0);" >
			WOOOT
	</div>
</div>

In diesem kurzen Beispiel ist alles enthalten was ihr braucht, um die wildesten Animationen zu erstellen. Das Beispiel von Prinzhorn benutzt nicht den Parallax-Effekt, liefert aber die Grundlagen.

Der div mit der ID „foo“ hat noch weitere Attribute außer der ID. Allesamt fangen mit data- an. Diese Attribute wurden mit HTML5 eingeführt und heißen „data-dash“-Attribute. Mit diesen Attributen steuert man im Fall von skrollr den Start- und Endpunkt der Animation, die sogenannten Keyframes.

Im Fall des Beispiels fängt die Animation bei 0 an die Hintergrundfarbe zu ändern. Bei 500 ist die Farbänderung abgeschlossen.

Die Farbänderung selbst wird durch die CSS-Angaben hinter dem jeweiligen „data-dash“-Attribut hervorgerufen.

Grundlagen skrollr zusammengefasst:

  • Ihr braucht ein Element mit ausreichender Höhe und mit der ID „skrollr-body“.
  • Ihr bindet vor dem schließenden HTML-body-Tag die JS-Datei ein und ruft die Funktion auf.
  • Ihr legt die Elemente an, die animiert werden sollen.
  • Zu Guter Letzt fügt Ihr an den Elementen die Angaben für die Animation hinzu.

Wenn die Höhe der Webseite den angegebenen Keyframes entspricht, sollte alles funktionieren.

Man könnte sich jetzt fragen: „Und wo bleibt der Parallax-Effekt?“

Jetzt wo die Grundlagen bekannt sind, kommt es nur noch darauf an, die richtigen Elemente anzulegen und die richtigen Attribute zuzuweisen.

Parallax-Effekt mit skrollr

Um den Parallax-Effekt zu bekommen, benötigt ihr mehrere Ebenen die übereinander liegen.

DEMO = http://prinzhorn.github.io/skrollr/examples/bg_constant_speed_more.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body	data-0="background-position:0px 0px;" 
	data-100000="background-position:0px -50000px;" >
 
	<div id="skrollr-body">
		<div id="center">
			<h1>Parallax background</h1>
			<p>Demo of background scrolling at constant speed independent of content height.</p>
			<hr>
			<p> . . . </p>
			<p> . . . </p>
			. . .
			<p> . . . </p>
			<p> . . . </p>
		</div>
	</div>
 
	<script type="text/javascript" src="../dist/skrollr.min.js"></script>
	<script type="text/javascript">
		skrollr.init({
			forceHeight: false
		});
	</script>
</body>

Et voilà 😉

Der Hintergrund bewegt sich in einer anderen Geschwindigkeit als der Vordergrund.

Die einzige Angabe ist die Position des Hintergrundes vom <body>-Tag. Der Hintergrund bewegt sich im Verhältnis zur Menge Text/Inhalt schneller als der Text/Inhalt.

Wenn ihr euch die Demos online angesehen oder auch selbst ein wenig damit rumgespielt habt, sind euch sicher auch die zusätzlichen Klassen aufgefallen. Skrollr weist den Elementen je nach Stand der Animation Klassen zu. Dadurch kann die Bibliothek unterscheiden, wo gerade eine Animation läuft und wie die Situation aussieht. Hierfür wird ein Style-Attribut zugeordnet.

Euch gefällt diese Kurzanleitung. Oder ihr habt selbst gute Beispiele, Ergänzungen etc.:
Dann ab damit in die Kommentare. Natürlich freuen wir uns auch sehr über euren like, retweet oder sonstiges „Weitersagen“.

Zurück zur Übersicht

One Reply to “Animationen mit skrollr”

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Spamschutz - bitte kurz noch ausrechnen: *