This Pro tutorial provides the steps to implement simplePARALLAX.js in Bricks for one or more parallax sections in which the background moves with user scroll.
We shall load simplePARALLAX from its CDN with the defer attribute to prevent render blocking, set up a regular image to appear like a background and initialize the parallax script.
Note: This example shows working with the static homepage.
Step 1
Add a Container having an image element.
[optional] If you want the image to go edge-to-edge of the browser, ensure that Section's Container does not have any left and right padding.
Select an image that is taller than your desired height of the parallax sections.
Apply a gradient background with transparency for the image so that the text content overlayed on the top can be clearly seen.
Add a class of say, parallax on the image.
