Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
neuhaus3000

Parallax in div

Recommended Posts

Hey guys, 

 

I'm new to 3rd version.  I'm quite new with Greensock actually.

 

I would like to parallax some text in a div while the page and image on the left stays still until I reach the end of the text.

(see image attached).

 

So basically, the user :

- scrolls 

- arrives at he div with the image and text

- continues scrolling but only the text scroll till the end

- continues scrolling to the rest of the page.

 

Is there a way to do this?  Any idea will be appreciated!!

 

Thanks!

 

neuhaus3000

 

maquette.jpg

Link to post
Share on other sites

Hey Zach, 

 

Thanks! But it's not a sticky situation... ;).  The scrollbar has to scroll all the page not only the div.  There are other divs before and after the one with the image and text.

I don't think that sticky would work on this... I'll investigate.

 

Thanks again!

 

neuhaus3000

Link to post
Share on other sites
Just now, neuhaus3000 said:

I don't think that sticky would work on this... I'll investigate.

If not, please be clear with why not and be more explicit with what you're wanting. A minimal demo of the situation would do wonders in helping us understand and help :) 

Link to post
Share on other sites

Here's a modified image...

 

So when the user arrives at this section, when he scrolls, the text goes up to reveal itself.

When the text is at the end, the navigator scrollbar scrolls the rest of the page. I hope it makes more sens. 

It's not a scrollbar in the div (iframe).

 

Thanks!!!

 

neuhaus3000

maquette.jpg

Link to post
Share on other sites
14 minutes ago, neuhaus3000 said:

There are other divs before and after the one with the image and text.

This seems like the perfect application for position: sticky;

 

See the Pen PeEaoq by elegantseagulls (@elegantseagulls) on CodePen



 

  • Like 3
Link to post
Share on other sites

I think I understand what you're getting at. You want there to be backgrounds like the slides that you show? So sticky wouldn't work because the entire background would have to be sticky in which case the scroll of the text wouldn't scroll with the page scroll?

 

In that case, we almost assuredly need to see the basic setup in code to help because how to work around the issue depends on your setup.

  • Like 1
Link to post
Share on other sites
4 minutes ago, ZachSaucier said:

In that case, we almost assuredly need to see the basic setup in code to help because how to work around the issue depends on your setup.

Ok, I'll try to do this today and come back soon.

 

Thanks everyone!

 

neuhaus3000

Link to post
Share on other sites

@elegantseagulls

 

Hey!  This is perfect, thanks!!!  I'll make a quick check with my client... ;)

 

Thanks for this!!!

 

neuhaus3000

Link to post
Share on other sites

Ok... Is there a way that everything moves (scroll) slightly when scrolling but the text faster (parallax effect)?

This is way more difficult I can assume... 

 

Any ideas will be appreciated!

 

neuhaus3000

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×