Parallax, Content stretching below picture

Could anyone help me figure out why the white space below the first picture stretches as you scroll down?

Thanks!

This line: $('.mainphoto').css('transform','translateY(' + (-currpos/4) + 'px)');

It doesn’t. The picture container is pushed up (by your javascript code) as the page is being scrolled down, so the distance between it and the rest of the page grows.

There’s not supposed to be any distance between the picture container and the rest of the page.

I am trying to get it to work like this one. https://codepen.io/nikkilr88/pen/qRyrNq

Then, instead of moving the element, change the position of background picture.

That’s what I did with the second one. $(’.mainphoto’).css(‘background-position’, '0 ’ + -currPos/4 + ‘px’);

The problem here is that I cannot set a starting bg position.

It’s supposed to work like this: http://www.valdelama.com/easiest-parallax-in-the-world

I figured it out.

I changed:

.mainphoto {
position: relative;
}

$(’.mainphoto’).css(“transform”,“translateY(” + (currpos)/2 + “px)”);

1 Like

Nice effect, well done.

I don’t see the need for setting position to relative, though. Changing the movement direction from up to down makes the difference.

Oh… haha. I didn’t know. :smiley: I thought i needed to keep ‘position’ in there. Thanks!