Parallax, Content stretching below picture

Parallax, Content stretching below picture
0

#1

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

Thanks!


#2

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


#3

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.


#4

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


#5

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


#6

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.


#7

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


#8

I figured it out.

I changed:

.mainphoto {
position: relative;
}

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


#9

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.


#10

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