How to change the background image when scroll

[Narendra Verma]

Hello,

I have three background image and I have to change it once reach the target. I found the example on this website Example link. Check How it works section.

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

[ZachSaucier]

Hello hybreeder,

 

I hope that you are just using those images for an example/learning purpose. It's illegal to copy assets from other's websites. 

 

With that being said, the biggest issue is that you are trying to use ScrollMagic but didn't include it in the pen. You should include the following assets:

• https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js
• https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js

ScrollMagic isn't a GreenSock product and we don't officially support it in these forums. Maybe this post by our very own Craig can help you:

If you have any GSAP-specific questions, we'd love to help. Good luck with your project!

[Narendra Verma]

Thanks for the reply @ZachSaucier

 

Yes images are only for testing purpose.

 

I added both links again

[mikel]

Hey @hybreeder,

 

You can also use the intersectionObserver - for example:

 

See the Pen bGGqgQj by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Narendra Verma]

Hi @mikel,

 

Thanks for the code pen.

The issue is if I go down and come back to top then it's not going to the previous one. I mean

On page load

1 -> go down -> 2

2-> go up-> 1

[mikel]

Hey @hybreeder,

 

Unfortunately, I do not understand your comment.

Here are two other concepts:

 

intersectionObserver and a Threshold array

See the Pen RwwpxxB by mikeK (@mikeK) on CodePen

 

ScrollMagic

 

See the Pen JjjWeyj by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Narendra Verma]

@mikel

 

Thanks for the answer. Really appreciate your support. I think this is enough for me to implement on my project.

[Narendra Verma]

@mikel I tried your code pen with mine, but not working like a reference link.

[mikel]

Hey @hybreeder,
 

What do mean saying 'not working like a reference link' ?

could you show your case in a CodePen?

 

Best regards

Mikel

[Narendra Verma]

@mikel, Sorry for miss communication.

 

I updated the code here. What I am doing Is, on page load I have to display image from css(OR image tag) and once indicator start 1 cross the target then display the image form GSAP script and it will override the image which coming from the CSS and vise and versa

This is my example link section  "How it works"  https://www.sketchdeck.com/

 

New code pen code here

[mikel]

Hey @hybreeder,

 

Just for fun ...

 

See the Pen pooPwMq by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Narendra Verma]

@mikel, I am appreciate your help and support and sorry for the late reply.

 

Is there any way to use png instated of svg?

[ZachSaucier]

2 hours ago, hybreeder said:

Is there any way to use png instated of svg?

Yep. Just switch out the elements and the timeline for what you want instead  

[Narendra Verma]

@ZachSaucier, Yes, Let me try this