Parallax background
A tiny javascript code
change CSS background-position
on page scroll
emulate parallax movement effect
Try instruction
Open website with big background
images in a new tab
activate console
F12
copy-paste script to the console and execute
!function(){function g(b,c){var d=a.innerHeight,g=b.height,h=b.top,i=h+g,j=0;-1*h>g||h>d||(0>h&&(j=-1*h>>1),i>d&&(j=-1*(i-d)>>1),c[e]=(c[e].split(" ")[0]||"50%")+" "+j+"px","scroll"!==c[f]&&(c[f]="scroll"))}function h(a){for(a=d.length;a--;)g(d[a].getBoundingClientRect(),d[a].style)}var a=window,b=console,c=["scroll","resize"],d=document.querySelectorAll(arguments[0]),e="backgroundPosition",f="backgroundAttachment";if(b&&(b.log("https://github.com/ytiurin/parallax-background.js"),b.log(d)),d.length){for(var i in c)addEventListener(c[i],h);h()}} (/*CSS SELECTOR*/)
replace /*CSS SELECTOR*/ with '.selector' to elements containing big background images
Scroll the page
and check the result
Fork