Back to Themes FAQs
What Is a Parallax Widget?
The parallax widget allows you to add elements to a page with varying speeds during scrolling. This can give the appearance of depth and allows for some neat effects.
Here is a simple example to demonstrate:
Notice how the Sale banner moves up the page a bit as you scroll. The tomatos also move at varying speeds. Let's take a look at how to use the parallax widget.
Before making any HTML/CSS or Theme Changes we strong suggest creating a backup of your theme. For a full explanation on creating a theme back-up please review This Article.
Add the Widget To a Page
(Option 1) Live design:
Click the widget icon to enter widget mode. Go to any widget area and add a widget.
(Option 2) Admin console:
Navigate to Themes -> Edit -> [page] -> Widgets. Choose Add Widget for the widget area where you would like the widget to appear.
Select the Parallax Widget:
Overview of Parallax Widget Settings
There are quite a few settings in this widget, so let's walk through them all.
Here is what you should see when first opening the widget:
The default speed is the speed at which all parallax elements will move as you scroll on the page. This speed can be overridden in each parallax element as we will see shortly. All of the speed settings throughout this widget can be either negative or positive. Switching between negative and positive changes the direction the element moves with respect to the axis of movement. Values between -10 and 10 are recommended, since anything faster than that can lead to jittery movement, but feel free to experiment.
The 'Add Parallax Element' section lets you add a new parallax element by clicking the 'Add New Element' button.
The 'Edit Parallax Element' section is where you will spend most of the time tweaking settings. Just click on a parallax element within this section to display that element's settings.
After clicking on a parallax element in the 'Edit Parallax Element' section, the parallax options for that element are revealed:
Let's go over each group of settings:
Sort - Specifies the order in which the elements are rendered onto the page. Lower numbers render first
Vertical and Horizontal Scroll Movement Direction - These determine the direction of movement during both vertical and horizontal scrolling. For example, if you have the 'Vertical Scroll Movement Direction' set to 'Vertical', then the element will move vertically on the page as you scroll up and down. If you set it to 'Horizontal' it will move horizontally on the page as you scroll up and down. These can be set to 'Horizontal and Vertical' to move the element diagonally as you scroll.
Parallax Speed - Overrides the default speed setting mentioned earlier
Vertical and Horizontal Parallax Speed - Specifies the speed at which elements move both vertically and horizontally. Note: Your element has to already be setup to move in a specific direction for these settings to work. For example, if your element only moves vertically during scrolling, then the Horizontal Parallax Speed setting will be ignored.
Max Horizontal/Veritical Distance - These specify the maximum distance that your element can travel in a certain direction. This allows you to set bounds for your elements to make them stop moving after scrolling a certain amount.
Top/Bottom Position and Left/Right Position - These settings allow you to place the element on a specific place on the page. This allows you to stack elements and really opens up a lot of options, so get creative! You can enter a value in either % or px (e.g 20% or 150px). It is recommended to use percentages as it will behave better on different screen sizes, especially for the Left/Right position settings. In the example at the beginning of this article, the tomatos make use of these settings to make them appear where they are on the page.
Z Index - Specifies the z index of this particular parallax element in relation to all elements on the page. Allows for setting the depth of parallax elements. Enter "-1" to place this element behind other elements.
Content Type - The content of a parallax element can either be Image or Custom. Image is the most commonly used content type for parallax elements. Custom allows you to enter any custom html.
When selecting a content type of Image, a new group of settings will appear that lets you select the image and define different properties for the image.
