I have a background that I would like to scroll through Parallax (slow scroll) when a visitor scrolls up and down the page.
The background image has a height of 1200 pixels (800 pixels wide), and I want the scroll speed to be adjusted depending on the size of the content of the page (document). In other words, I want the visitor to be able to see (eventually) the full background image when they scroll down, seeing the bottom of the image when they fall into the footer.
I tried different methods to no avail, I have the current js code:
function calcParallax(tileheight, speedratio, scrollposition) { return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1))); } window.onload = function() { window.onscroll = function() { var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset; var ground = document.getElementById('bg'); var groundparallax = calcParallax(53, 8, posY); ground.style.backgroundPosition = "0 " + groundparallax + "px"; } }
HTML code:
<div id="bg" class="movable" > ...all content code... </div>
CSS code:
#bg { background:url("../images/cave-background.jpg") no-repeat fixed 50% 0; background-repeat: no-repeat; background-attachment: fixed; }
Currently, the JS code doesn't even work. It doesn't even move the bg image ...
Insight would be wonderful!
source share