After building a parallax in a client site, I decided that my clients might want to create or edit their own parallax. A web parallax is a vertically fluid scrolling of images and text. A parallax is easier to understand than to describe, so see this example parallax. I am using the Redux framework on the backend of a WordPress site for a content provider to easily build and configure the parallax. Here were my goals to create the parallax on a Bootstrap homepage:
- the parallax’s position on the homepage could be changed
- the parallax could easily be activated or removed from the homepage
- the number and order of parallax images needed to be adjustable and re-ordered
- the floating parallax text blocks could be easily edited
- the parallax could have an optional title
- the height of parallax images could be adjusted
- the opacity of the parallax images could be adjusted
- there could be no client coding, only WordPress content provider skills required
What made my project really work was Redux’s slides field. This field allows the user to create any number of slides which each includes: an image, a title, and a text block, so you can create a parallax with an unlimited number of slides. The slides can also be reordered by dragging each slide to your desired sort order, the top slide displays first. I also added adjustments for the background images’ height and opacity. Making adjustments to the parallax couldn’t be easier.
Adding images and text blocks within the Redux homepage theme options
See the Pen Parallax by gordo019 (@gordo019) on CodePen.
See the Pen Redux config settings by gordo019 (@gordo019) on CodePen.