Simple parallax background image on a header
A work in progress. I'm still not happy with this, but getting there
Core method is an extension of Sticky header. Using CSS transforms and a little script. Not too sure about the debounce method used, will see how it performs.
The image is set as a background on
.hero-bg and placed via
.hero_fixed to change to
position : fixed
Requires detect CSS
transform3d browser support.
Three id's and two class names are hard coded, but may be easily externalised.
The _redrawLoop function loops continuously, without the more usual
setInterval. By using
requestAnimationFrame instead much faster, and smoother, animations are possible.
obj.style is more performant than
_setVars function is called on initialisation and when the window is resized. It adjusts the height of the background image to suit header dimensions.
A little extra height is required to ensure there's no body background bleed-through when scrolling extremely quickly. With the figures used allow the background to overscan the header by approximately 23%. Set to 10% above and 13% below.
offsetHeight is more performant than
A check to ensure
transform3d support before initialisation. Please note the resize event listener would be better served
debounced when used in full production, a little beyond scope here.