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.
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.
This is a Pro members-only tutorial.
To get full access, login below or sign up for a Pro Account