Durch den Einsatz der Technologien wie HTML5 und CSS3 ist es möglich, anspruchsvolle, interessante und bemerkenswerte Effekte im Browser zu erstellen. Besonders der Einsatz von Parallax Scrolling hat sich als großer Trend bei Websites entwickelt.

Unter Parallax Scrolling versteht man den Effekt, bei dem der Vordergrund und der Hintergrund einer Webseite sich unterschiedlich schnell bewegen. Durch Parallax Scrolling können sich Elemente auf der Webseite bei unterschiedlichen Perspektiven und Geschwindigkeiten bewegen. Dadurch kann man unter anderem einen 3D Effekt beim Scrollen erzeugen.

 

Wie funktioniert Parallax Scrolling?

Der einfachste Weg Parallax Scrolling einzusetzten, wären die Properties background-position oder margin-top beim Scroll Event zu verwenden.

$(animation.selector)
.css('background-position', 'xPos yPos');

Allerdings sollte man diesen Weg aus Performance-Gründen vermeiden. Es sollten nur Properties verwendet werden, die im Browser leicht zu animieren sind. Solche Properties sind unter anderem: translate3d, scale, rotation und opacity.

$(animation.selector)
.css({ 'transform': 'translate3d(' + translateX +'px, ' +   translateY + 'px, 0) scale('+ scale +')',
'opacity' : opacity
})

Aus Performance-Gründen sollte auch beachtet werden, dass nur Elemente animiert werden, die sich im Viewport befinden. Weiters sollen die Animationswerte angemessen gerundet werden. Außerdem sollte die Animation nicht direkt am Scroll-Event gebunden sein. Außerdem sollte window.requestAnimationFrame verwendet werden, sobald Animationen durch JavaScript ausgelöst werden.

Codebeispiel für das Runden des Animationswertes

value = value.toFixed(2)

Codebeispiel für window.requestAnimationFrame

function draw() {
window.requestAnimationFrame(draw);
// Drawing code goes here
scrollEvent();
}
draw();


 

Parallax Scrolling auf mobilen Geräten

Parallax Scrolling war beziehungsweise ist auf mobilen Geräten teilweise eingeschränkt. Grund dafür war, dass auf älteren mobilen Betriebssystemen eine Manipulation von Dom-Elementen während dem Scroll-Event nicht zugelassen waren, solange das Scroll-Event nicht abgeschlossen ist.

Mit dem Betriebssystem Ice Cream änderte das Scrolling Verhalten, und es war ab diesem Zeitpunkt möglich während dem Scroll-Event das DOM zu manipulieren. IE Mobile und Windows Phone 8 kamen kurzer Zeit nach. Erst mit iOS 8 ist es auch auf Apple Geräten möglich, einen Parallax-Effekt zu erzielen.
Für ältere iOS Versionen gibt es einige populäre Bibliotheken wie iScroll library, die das Scrolling durch die Verwendung von CSS Translations nachbauen, um auch für diese Geräte einen Parallax-Effekt zu erreichen.

 

Beispiele für Parallax Scrolling

http://boy-coy.com/
http://www.sweez.com.br/#atendimento
http://www.sweez.com.br/#atendimento
http://hotdot.pro/en/

 

Quellen

http://www.creativebloq.com/web-design/parallax-4132336
http://www.creativebloq.com/web-design/parallax-scrolling-1131762
http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/
http://morris-digital.co.uk/blog/super-simple-60-fps-parallax/
https://medium.com/@dhg/parallax-done-right-82ced812e61c