How to create a section parallax?

How To
1

Heyho!

Can someone help me with creating a section parallax? I´ve tried so many times already, but it never works for me, and I´m not even sure if my setup is correct. :slightly_frowning_face:

My client would like to have a section parallax with a pretty strong parallax effect, pretty much like the one shown here: https://www.zahnarzt-neise.eu/praxis/. He wants the section to have a height of 900px on large screens, and the effect should be exactly like in the example. This means the background scrolls slower than the actual content. No matter what I try, either the background image isn´t visible anymore because it´s shifted downwards a lot, or I get other weird behaviors.

How does this work? I´ve already tried so many setups in Bricks with the “Parallax Effects” extension that comes with Bricksforge. But, to be honest, I have NO clue if that´s even the right tool to help me achieve this.

I´ve already googled, but all I could find was JavaScript or Rellax libraries or something similar. I´d say that in general, I understand how it should work, but I just can´t make it work in Bricks…

Can someone help me with this? As shown in the example, it´s a background parallax. I don´t want any parallax effect on an element on the website, like it´s shown here: Vanilla Javascript Parallax Library — Rellax.

Thanks a lot in advance for your help!!

Edit:

I managed to do it with the node editor and then animating the background-position-y with a custom object. That works nicely! But I´d still be interested if there´s an easier way to do this :smiley:

1 Like
2

hi, its actiually more simple than you think,
1- go to bricksforge setting > Extensions > activate Scroll Smoother Gear icon will appear click it and make sure Smooth Scrolling Provider is on GSAP and activate Allow Effects toggle

2- go to your sections and add attribute data-speed to top, mid and bottom sections, use value 1 for top and bottom section attribute and 1.2 or higher on mid section attribute.

3 Likes
3

That´s amazing!! Thank you so much! That works! :smiley:

Edit:

Just curious… It looks like this method automatically adds smooth scroll to the website, even if I set the Smooth Value to 0 and the Speed to 0. My client doesn´t want the smooth scroll on his website.

4

@Majed thanks for the tutorial. Unfortunately, it doesn’t work with Lenis Scroll Smoother. Any ideas?

And what about parallax for photos, for example, so they scroll at different speeds?

Please share some ideas, because honestly, I’m shocked that there’s so little information about such a basic animation as parallax.

2 Likes
5

Keep in mind that often a bit of smooth scroll is a good combination for a website with parallax content (section/photos).

For section parallax is doable with bricksforge timeline playing with scrub. If interested I can post some settings.

For photos thing can become a little more complex depending on what is your goal. A nice effect in my opinion is something like that: https://codepen.io/ghislefou/pen/WNZZWQd

It could be easily replicated with node editor and custom JS.