What am I doing wrong here?

[nixnerd]

Here is the codepen:

http://codepen.io/Joe_Temp/pen/HnDLz

As you can see, the first background image starts out with background-position: bottom; The JS then takes over with this: $bgobj.css({ backgroundPosition: coords });

var coords = '50% '+ yPos + 'px';

The result is a nasty jumping effect. I need the background image to stay with background-position: bottom; And just start scrolling there, instead of in the middle.

Any help would be GREATLY appreciated thanks!

[isra26]

I changed the data-speed=’2″ to 10 and that did the trick, it looks a lot smoother and doesn’t cut the image like before.

[__]

Most browsers will still understand that, though. Yes, there should be a space, but I don’t think that’s the actual problem.

[__]

I was looking at it earlier, but I don’t really have a suggestion for you. I think you’d need to change the way the script works.

I’m pretty sure that by starting at the bottom, you wouldn’t get a paralax effect – the background would simply stay still. You might need to have a fixed height container, based on the image size.

Honestly, though, I’m not sure what exactly to try.

[__]

ahh… cool.

[Author]

Posts