Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Araf Hossain

Moving Background Image Vertically on Scroll and hide after a section

Recommended Posts

As you can see in my codepen code there is a image and I want to fixed its position center in the section. When scrolling down it will follow the scroll.

 

When the following section comes up there will be a parallax effect. That means image will stick at the bottom of that section and following sections going up over the image. 

Here is a simple example. Like the form on that website, I want my image but in the center of viewport. 

 

If you don't understand please let me know.  

See the Pen Yzwpevj by arafnoob (@arafnoob) on CodePen

Link to post
Share on other sites

Hey Araf. There's a demo in the ScrollTrigger docs that does this sort of thing. What you're wanting is essentially a simplified version of this demo:

See the Pen YzyqVNe by GreenSock (@GreenSock) on CodePen

 

This is exactly what position: sticky was made for.

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

Hey Araf. There's a demo in the ScrollTrigger docs that does this sort of thing. What you're wanting is essentially a simplified version of this demo:

 

 

 

This is exactly what position: sticky was made for.

I really appreciate your answer. But it is very complicated for me :( Is there any simple way to do? 

 

Would you please give an example with my codepen code? Thank you :-) 

 

 

Link to post
Share on other sites

Research position: sticky. If you need more complicated animations then get ScrollTrigger involved.

Link to post
Share on other sites

I have tried lots of things after that I come up with GSAP. In gsap it is pretty much easy I know. But for the newbie I don't know how to do it. 

Link to post
Share on other sites

I have done as you have done. But it not working. Because my every section "position: absolute" for this reason it not working might be. Checkout my pin then maybe you will get some idea. 

 

See the Pen Yzwpevj by arafnoob (@arafnoob) on CodePen

Link to post
Share on other sites

Correct, you'll have to come up with a different way of positioning your items, at least the ones related to this effect. Unfortunately we don't have the capacity to build out the effect for you. Let us know if you have specific questions and we'll do our best to help :) 

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.

×