A brief intro about parallax before we jump into the how-to section. It is a web design trend that emerged in 2011. In the context of web design, parallax refers to a behavior where the background moves at a slower pace than the foreground when a user is scrolling down the page. Parallax is an optical illusion-based effect. When seeing two different objects — a close object and a distant object — the closer object appears larger than the one at the distance. Also, our eyes perceive that the distant object moves more slowly than the closer object. In this case, the closer object refers to the foreground while the distant object refers to the background.
Here is a simple example of a parallax effect.
When implemented properly, the parallax effect could offer an immersive experience to your site visitors. They won’t go away too hurry.
In WordPress, you have some options of plugins to add a parallax background. If you use Brizy on your WordPress site, you can effortlessly apply a parallax background to a certain block. Here is how to add a parallax background in Brizy.
Adding a parallax background in Brizy
First off, you create a new page (Pages -> Add New) and edit it with Brizy. Or, you can also edit an existing page. If you are new to Brizy, you can read our previous article to learn how to use Brizy. On the Brizy editor, ad a new block by clicking the plus icon on the canvas area.
Select a block template you like. Or, if you want to add the elements to the block yourself, you can click Create your own.
Once the block is added, hover your mouse over it and click the mixer icon to open the settings bar. On the settings bar, click the Background tab and select an image you want to use as the background by clicking the image picker. Once the image is selected, select a parallax effect type you want to use on the Parallax option. There two parallax effect types you can choose from: fixed and animated.
That’s it. To apply a parallax background to other blocks on the page you are working on, simply repeat the steps above. The parallax effect can only be applied to block background. Brizy doesn’t support the parallax effect for column background.