Parallax scroll for only one background

[DanielLav]

Hello dear GSAP community! 😍 Today, for educational purposes, I'm dealing with the topic of parallax and I want to do one simple idea using gsap.

 

There is only one background in my univesity project.

My idea is that during scrolling the background "shifts" in height not significantly when you scroll. This effect should work while scrolling throughout the page, not just at the beginning. Thus creating a simple parallax effect.

 

I took the sample code from my parallax demo, but damn it doesn't want to work.

 

And I don't think I understand how parallaxes work at all. Therefore, I will be glad to any help from you and good advice.

The task seems easy, but for some reason I got stuck on it.

 

I also attach small codepen example, that you can check:

 

Thank you very much for any help in advance!

See the Pen OJorPBj by ProjectDCL (@ProjectDCL) on CodePen

[GreenSock]

Hi @DanielLav. I noticed a few problems:

1. Your code is referencing target.dataset.speed but you didn't define a data-speed attribute on your target. 
2. You're animating the entire element, but don't you want to only animate the background image? 

I'd strongly recommend finding a parallax demo on this page and studying it: 

https://greensock.com/st-demos

 

These may have some demos that'll serve as a jumping-off point: https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ

 

If you get stuck again, just post your minimal demo back here and we'll take a peek. Good luck!