Search for Parallax effect tutorial

How To
1

Hello,
is there a tutorial for a parallax effect?
Cheers and thank you
Rafael

2 Likes
2

ItĀ“s rlly a pity that Bricks doesnĀ“t seem to have basic options for parallax anymoreā€¦

However, what IĀ“ve been using so far is Rellax.

ItĀ“s fairly easy to setup and works great! Not sure if thereĀ“s an easier solution though. If someone has one, please let me know! Until then IĀ“ll be using Rellax :slight_smile:

1 Like
3

Hi Soluna, do you have a quick how-to that explains how to add and use Rellax on a bricks website?

1 Like
4

Hey :slight_smile:
IĀ“m so sorryā€¦ I usually write down my steps to reproduce what I did but for whatever reason I now canĀ“t get it to work againā€¦ The parallax is happening but it looks really bad for meā€¦ IĀ“ll spend a bit more time on it within the next days and see if I can make it work again. IĀ“ve been trying for an hour now and I get an effect that pretty much is parallax but itĀ“s not what youĀ“d expect. The parallax behaviour is really weird.

1 Like
5

So, I managed to get a working solution for me but without any external library. Just some Javscript. HereĀ“s how I did it:

  1. Adding a section with a container inside.
    CSS adjustments (either with manual CSS or in Bricks directly):

Section:

height: 600px;
position: relative;
overflow: hidden;

then I gave the section a class ā€œparallaxā€.

Container:

width: 100%;
min-height: 100vh;
position: absolute;
top: 0;
right: 0;
overflow: hidden;

Then I set the background image to the container:

  • background-attachment: fixed
  • background-position: custom: X-axis: center, Y-axis: -300px (you probably need to adjust this value, depending on your image).

Then give the container a class ā€œparallax-containerā€.

Then either add a ā€œCodeā€-widget or go to the page settings and under ā€œcustom codeā€ add the following Javascript:

<script>
document.addEventListener('scroll', function() {
    const parallaxContainer = document.querySelector('.parallax-container');
    let scrollPosition = window.pageYOffset;
    let yOffset = -300 + (scrollPosition * 0.5); 
    yOffset = Math.max(-300, Math.min(300, yOffset)); 
    parallaxContainer.style.backgroundPositionY = `${yOffset}px`;
});


</script>

Here again: You probably need to adjust the values a bit.

ThatĀ“s it :slight_smile:
Make sure your background-image is big enough (enough height) cause in my first test it showed the border of the image when I scrolled.

I know itĀ“s probably still not the best solution but I hope this helps a little bit.

1 Like