How to scroll the div on scroll

[Narendra Verma]

Hello,

 

I am trying to scroll the box. Like when user scroll the page from the top then my box will scroll bottom to top and if scroll the page from bottom to top the box will scroll from top to bottom.

 

I know it's confusion so I am sharing you the reference website http://www.xn--entreprenrsgatan-uwb.se/ . In this website ( check out the image first http://prntscr.com/jqor17), You can check the black box, When you scroll from the top then that black box animate from bottom to top and if you scroll from bottom animate top to bottom on the same position. I don't have any idea how to achieve this using scroll magic. Would you help me out in this?

 

See the Pen wXMNZK by Narendra_verma (@Narendra_verma) on CodePen

[PointC]

I'm not 100% sure, but I think you're asking about the parallax effect on scroll? If that's the case, we've had several discussions about it. Check out these threads for more info and ideas.

 

Those are just a few of the discussions. Please use the search feature and look for parallax and you'll find several more threads.

 

Hopefully that helps. Happy tweening.

 

[Visual-Q]

 

Here's another good solution from Shaun for parallax scrolling. Links tween progress to window scroll position.

 

 

 

 

[Narendra Verma]

Sorry, PointC sir and  Visual-Q sir,

 

I already checked that and tried but not working for me. I am confused from where should I start.

 

I updated my Codepen. Please check

 

Any more help in this?

[PointC]

Your each() loop is targeting the class of .container, but you only have one of those so the box animations are firing at the same time. You'd want to target the .img_section class like this:

 

$(".img_section").each(function() {

 

The other problem is your trigger is pretty far down on the page so the element timelines are firing on page load. Here's a super simple example using some plain divs that should help.

 

See the Pen zaBYoW by PointC (@PointC) on CodePen

 

If you're using ScrollMagic, I'd highly recommend using the addIndicators() plugin to make your debugging easier.

 

Happy tweening.