javascript - Why does my images jump a few pixels when executing this parallax script? -
i not javascript guy dont understand why code this:
when first loading page , scrolling, image targeted jumps down 30px
var parallax = document.queryselectorall(".headerphotosmall, .headerphoto"), speed = 0.9; window.onscroll = function(){ [].slice.call(parallax).foreach(function(el,i){ var windowyoffset = window.pageyoffset, elbackgrounpos = "50%" + (windowyoffset * speed) + "px"; el.style.backgroundposition = elbackgrounpos; }); };
video showing problem: https://i.gyazo.com/040f328ac78a5d5243e37352e19e0cf6.mp4
i think @beyelerstudios's comment explains problem... initial position of images aren't related initial scroll position.
i don't know parallax, though...
since don't know css, tried auto-update position of parallax images when script runs, array#foreach
loop. if you're declaring these background images later, need wait page load.
var parallax, speed; var updatebgimagepos, updateparallaxposition; // converts parallax html collection // array parallax = [].slice.call( document.queryselectorall(".headerphotosmall, .headerphoto") ); speed = 0.9; updatebgimagepos = function(el, i) { var windowyoffset = window.pageyoffset, elbackgrounpos = "50%" + (windowyoffset * speed) + "px"; el.style.backgroundposition = elbackgrounpos; }; updateparallaxposition = function() { parallax.foreach(updatebgimagepos); }; window.onscroll = updateparallaxposition; // if script declared later images, // don't need wait page load // get/modify them. updateparallaxposition();
Comments
Post a Comment