Parallax Scrolling Tutorial: So einfach geht’s
24. November 2013 · Kategorien: CSS Stylesheets, Internet, JavaScript, Webentwicklung
Parallax Scrolling ist ein Effekt, der sich zur Zeit einer großen Beliebtheit erfreut. Was auf den ersten Blick sehr kompliziert aussieht, ist aber ganz einfach umzusetzen! Dieses Parallax Scrolling Tutorial erklärt Dir, wie.
Was ist Parallax Scrolling?
Parallax Scrolling basiert auf dem Effekt der Bewegungsparallaxe: Während sich ein Objekt in eine bestimmte Richtung mit einer bestimmten Geschwindigkeit bewegt, bewegt sich gleichzeitig ein anderes Objekt in einer anderen Geschwindigkeit oder in eine andere Richtung.
Am besten verstehst Du das wohl, wenn Du es dir anschaust. Folgende Webseiten nutzt Parallax Scrolling und ist ein schönes Beispiel:
ala.ch
Wie Du siehst, verändert sich die Position bestimmte Grafiken, während du scrollst. Und das nicht, wie gewohnt, entsprechend der Scrollgeschwindigkeit nach oben, sondern in andere Richtungen und mit verschiedenen Geschwindigkeiten.
Parallax Scrolling Tutorial
Es gibt bereits zahlreiche JavaScript-Plugins, die Dir dabei helfen, Parallax Scrolling umzusetzen. Ich möchte Dir hier erklären, wie es im Grunde genommen funktioniert. Deswegen nutzt folgender Beispiel-Code bis auf das jQuery-Framework keine weiteren Hilfsmittel.
Schauen wir uns erstmal den HTML-Code an:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/parallax.js"></script> <link rel="stylesheet" href="css/style.css" /> </head> <body> ... <div class="parallax elbe" data-direction="left" data-speed="0.7"></div> ... </body> </html>
Ganz wichtig ist, dass Du dem HTML-Dokument in der ersten Zeile einen Doctype zuweisen. Ich habe mich für den HTML5-Doctype entschieden. Würdest Du das vergessen, würde das JavaScript nicht richtig funktionieren, da die aktuelle Scrollposition nicht korrekt ermittelt werden kann.
Wie bereits erwähnt, binde ich jQuery ein. Und zusätzlich eine JavaScript-Datei parallax.js, die ich gleich aufzeigen werde.
Dreh- und Angelpunkt ist der Div-Container, der den Parallax-Scrolling-Effekt darstellen soll.
Dieser besitzt das data-direction-Attribut, mit dem wir angeben, dass sich der Hintergrund des Elements nach links bewegen soll, wenn der Benutzer nach unten scrollt. Für jeden Pixel, den der Benutzer scrollt, wird der Hintergrund um 0,7 Pixel nach links scrollen. Das gibt das data-speed-Attribut an.
Die CSS-Datei ist wenig aufregend:
.elbe
{
background-image: url('../img/elbe.jpg');
width: 900px;
height: 300px;
}
Wir geben dem Div-Container ein Hintergrundbild, das breit genug ist, sodass es genügend weit nach links gescrollt werden kann. Zusätzlich setzen wir eine feste Größe.
Folgenden JavaScript-Code beinhaltet die Datei parallax.js:
$(function() {
$(document).scroll(function() { // ... immer, wenn auf der Seite gescrollt wird...
var scrollPosTop = $(document).scrollTop(); // ...speichere die aktuelle obere Scrollposition
var scrollPosBottom = $(document).scrollTop()+$(window).height(); // ... und die aktuelle unterste Scrollposition
$('.parallax').each(function() { // Für jedes Element mit der CSS-Klasse "parallax"...
var positions = $(this).position(); // Lies die Position aus, in der das Element liegt.
var posTop = positions.top; // Speichere die Position, an der das Element oben beginnt.
var posBottom = positions.top+$(this).height(); // speichere die Position, an der das Element unten abschließt.
if(posTop <= scrollPosBottom && posBottom >= scrollPosTop) // Ist das Element im sichtbaren Bereich?
{
// In welche Richtung soll sich der Hintergrund des Elements beim Scrollen bewegen?
var direction = 'left';
var speed = 1;
if($(this).data('direction'))
{
direction = $(this).data('direction');
}
// Mit welcher Geschwindigkeit soll sich der Hintergrund des Elements bewegen?
if($(this).data('speed'))
{
speed = $(this).data('speed');
}
// An welcher Scrollposition befinden wir uns - relativ gesehen zum Element?
var pos = scrollPosBottom-posTop;
var x = 0;
var y = 0;
// Berechne an Hand der Richtung die neue Position des Backgrounds des Elements.
if(direction == 'top')
{
y = speed*pos*-1;
}
else if(direction == 'right')
{
x = speed*pos;
}
else if(direction == 'bottom')
{
y = speed*pos;
}
else // left
{
x = speed*pos*-1;
}
// Setze die neue Hintergrundposition des Elements.
$(this).css('background-position', x + 'px ' + y + 'px' );
}
});
});
});
Was macht diese Datei?
Immer, wenn der Benutzer auf der Webseite scrollt, überprüft JavaScript, ob sich ein Element mit der CSS-Klasse parallax im sichtbaren Bereich befindet. Wenn ja, wird die Hintergrundposition des Elements entsprechend der aktuellen Scrollposition (var pos), der gewünschten Geschwindigkeit (data-speed) und der gewünschten Richtung (data-direction) angepasst.
Das ist im Grunde genommen auch schon alles, was Parallax Scrolling ausmacht. Man könnte das Script noch so erweitern, dass auch diagonale Richtungen möglich sind – also x und y gleichzeitig geändert werden.
Wenn Du noch Fragen hast, oder Dir etwas unklar ist, kann Du gerne mit einem Kommentar nachfragen.
Autor: Christian Kilb | Kategorien: CSS Stylesheets, Internet, JavaScript, Webentwicklung
Um die relative Scrollposition zu erhalten, muss anstatt:
var pos = scrollPosBottom-posTop;
folgendes benutzt werden:
var pos = scrollPosTop-posTop;
Außerdem ist zu beachten, dass standardmäßig der body eines HTML-Dokuments einen margin von ca. 8px hat.
Mit freundlichen Grüßen
Luca G.