Parallax header background image WIP

Testing variants: Things may get unpredictably better or worse while modules are under development.

The full Parallax header image article.

With the exception of the image all required files are annotated and self-contained within the page source.

Version 6

The full Parallax header image article.

Testing varients: Things may get unpredictably better or worse while modules are under development.

I'm starting to hate this demo.

It appears having a resized image as a background requires the processor to work overtime.

Okay this version isn't terrible, and I think it's the best that can be done using 3D transforms.

Perhaps time to move on to version 7 using canvas, or responsive images, or perhaps WebGL?


Added Blurred image late loader.

Loads a small blurred image first. Then, after the onload event, swaps for the large version. Which is introduced via a mixed blur / opacity animation.

Small image is 140 x 42px @ 2KB and embedded as dataURI.
Large image is 1400 x 420px @ 437KB (ideally an easily divisible height and width combination)

Parallax header animation is disabled while off-screen.

Parallax header may be disabled below a set screen width. Set at 400px in this demo.


Added sticky navigation block.


To do

Account for mouse wheel scroll.

Work on switching off parallax header on small viewports (done) responsively, possibly tying in to media query.

Separate sticky navigation to new article.