Window.addEventListener("scroll", onScroll, false) Var prlx_effect_2= +(window.pageYOffset * 1 ).toFixed(2) //. Var prlx_effect_1= +(window.pageYOffset *.7).toFixed(2) //. Updated JS based on Prinzhorn Comment var requestAnimationFrame = window.requestAnimationFrame || Window.addEventListener("scroll", parallax, false) Var prlx_effect_1= -((window.pageYOffset / 4) *2.25 ) It's working pretty well but is a bit jumpy, I've also tried to use the jQuery animate function but that is even more jumpy.īackground: url(water-line.png) no-repeat transparent I've set the speeds/increments to be slightly different to create a parallax effect.
I've got it working by using jQuery to change the css bottom property to make it seem that the two columns divs are moving down the page beneath the waterline at a similar speed to the scroll when the user scrolls down the page. Near the top of the page I have a div called #top-banner, it has a fixed background image, sitting within this div are two more within a row, the fisrt div / column has an image of a model & the second div has just text.īelow the #top-banner div is a div with a background image of a waterline, the desired effext is to have the waterline to cover the #top-banner as the user scrolls down, to make it seem as if the model, text & background are being covered by water. I've a small bit of parallax on a site I'm working on, it's working almost fine but the foreground divs are a bit jumpy when I scroll down the page.
0 kommentar(er)
