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: PRAXIS – Zahnarztpraxis Raphael Neise | Schmallenberg | Tel. 02972 / 16 55. 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.