Currently experiencing some challenges with parallaxing backgrounds. I developed a website for an event organized by my friends, featuring multiple background images that shift between content sections to create a parallax effect. I have implemented code to adjust these background images while scrolling, yet there seems to be a delay in the parallax effect specifically in WebKit browsers when using the scrollwheel.
You can view the website here:
I aimed to replicate the parallax effect seen on the Spotify website as inspiration:
Although my implementation mirrors the approach taken by Spotify - utilizing a throttled function to calculate background transformations based on vertical scroll position - there is noticeable lag compared to their seamless transition. The functionality works smoothly in Firefox/IE and even in WebKit browsers when manually sliding the scrollbar, but the visual delay persists.
If anyone has insights on how to address this latency issue, your tips would be greatly appreciated.
Below is the code snippet for the parallax functionality (apologies for the excessive use of this due to Prototype):
parallaxBackground: function () {
var viewportTop = this.elements.$document.scrollTop();
var viewportBottom = viewportTop + this.elements.$window.height();
var scrollDelta = this.slideHeight + this.elements.$window.height();
$.each( this.backgroundSlides, function ( index, slide ) {
var slideTop = slide.$container.offset().top;
var slideBottom = slideTop + this.slideHeight;
if ( slideBottom < viewportTop || slideTop > viewportBottom )
return true;
var factor = 1 - ( slideBottom - viewportTop ) / scrollDelta;
this.transformBackground( slide.$image, this.slideLength * ( factor - 1 ) );
}.bind( this ) );
},
transformBackground: Modernizr.csstransforms ? function ( $backgroundElement, distance ) {
$backgroundElement.css( {
'-ms-transform': 'translate(0px, ' + distance + 'px)',
'-webkit-transform': 'translate(0px, ' + distance + 'px)',
'transform': 'translate(0px, ' + distance + 'px)'
} );
} : function ( $backgroundElement, distance ) {
$backgroundElement.css( 'top', distance );
}
Here's how it is linked (employing Underscore for throttling):
this.elements.$window.on( 'scroll',
_.throttle( this.parallaxBackground.bind( this ), 16 ) );