Redux Parallax Module

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 Redux parallax module

Adding images and text blocks within the Redux homepage theme options

I was surprised how little coding was required to build a parallax. Just a little HTML/PHP, a few CSS rules and no Javascript. If you would like to learn more about the Homepage Layout Manager, I have a post that introduces the Redux homepage theme option.

See the Pen Parallax by gordo019 (@gordo019) on CodePen.

See the Pen Redux config settings by gordo019 (@gordo019) on CodePen.

3 thoughts on “Redux Parallax Module

  1. Gordon

    I added a Codepen to the post with my Redux config settings. Remember that you must also add: ‘parallax_whatever’ => ‘Parallax’ to your module sorter, so the parallax can be enabled or disabled and sorted with the other existing modules.

  2. Gordon

    Thanx iOS for complicating my simple parallax. I had to disable it with the media query you see in my CSS above. So, the parallax effect will not work on iOS devices but will do a basic page scroll. If anyone finds a fix for iOS devices please let me know.

Comments are closed.