0

Lately, I've noticed my parallax code makes a weird left to right jitter movement. The code is very simple:

$(window).scroll(function(){
    var body = $('body');
    var top = $(this).scrollTop();
    $('.carousel-inner img').css('top', top / 2);
});

The same jittering issue can be seen in this demo http://www.bootply.com/vTCajmeQHQ

Why is this happening? Has the way the browser renders the scroll event changed? How can I fix it so it does not jitter anymore? This only started happening a few months ago, it was smooth before.

My markup looks like this <%= image_tag 'img.jpg'%> <%= image_tag 'img1.jpg'%>

Zolve
  • 514
  • 5
  • 13
  • The problem is the difference between the original position, and the positioning after you apply the new CSS style. So, if the "top" of your image is initially offset, that's all lost the first time this function runs. Can you provide the HTML/CSS of how the image is initially placed? – Dan Orlovsky May 25 '15 at 20:04

1 Answers1

0

The exact problem, especially if you're following the code from the example you provided, is the initial positioning of the BG image.

So, as it stands the initial position is:

background: url('/assets/example/bg_blueplane.jpg') no-repeat center center fixed;

But when you apply the new styles, the "center center" positioning is reset and is being re-positioned in relation to the top of the window. I'm actually pretty certain this happens to the other images in the example you provided, only we can't see them when we start scrolling.

Take out the initial positioning, and you should get the effect you're looking for.

Dan Orlovsky
  • 1,045
  • 7
  • 18
  • Sorry i wasnt clear enough, im not following that demo i posted, i just was just looking for a demo to show the exact issue visually. In my example my image itself is an image tag, not a div with a background property. my markup looks like this
    <%= image_tag 'img.jpg'%>
    <%= image_tag 'img1.jpg'%>
    –     – Zolve May 25 '15 at 21:43
  • Please kindly post your code as opposed to completely unrelated code. My solution solved the problem in the example you provided. – Dan Orlovsky May 25 '15 at 21:46
  • http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellar-js--webdesign-7307 – Dan Orlovsky May 25 '15 at 21:52
  • That's the only direction I can offer. I've only applied parallax scrolling to background-positioning. That link was an answer provided to applying parallax scrolling to img elements, found here: http://stackoverflow.com/questions/17392988/is-it-possible-to-parallax-an-img-tag-rather-than-background-image-in-a-div – Dan Orlovsky May 25 '15 at 21:54