How to use the Parallax element

In this article, you will learn about the Parallax element and how to use it to add movement to your images for better experiences.   

About the Parallax element

Parallax is an element of GemPages that allows you to create a giant banner with a parallax scrolling effect. Parallax scrolling is a technique where background images move slower than foreground images, creating an illusion of depth on a two-dimensional site.

 

From the GemPages Dashboard, open a template to edit. You can quickly find the Parallax element on the left sidebar of the Editor, under the Banner section. Drag & drop the element to any position you prefer.

 

 

Due to the limitations of the mobile web browser, the parallax effect may not work correctly on mobile. In that case, it will work the same as a hero banner instead.

When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Design tabs.

Configure the Settings Tab

Image

There are three options for you to upload your image:

  • Replace Image: This option lets you choose an image from your computer to upload.
  • Browse Gallery: You can pick one from the gallery which contains all of your uploaded images.
  • Image Src: This option allows you to input the image link.

GemPages' limit for each uploaded image is 3 megabytes (MB). If your image file is larger than 3MB, kindly upload it on the Shopify server, then copy and paste the image link. Find the detailed instructions here.

Image Quality: This option allows you to decide how your image will be compressed - Lighter or Lightest. However, it’s only available for images uploaded on our server - the UCare CDN.

Speed

You can decide the scrolling speed in this section. Adjust the slider or enter the value into the box (from 0 to 1).

 

 

If you set the speed at 0, the image will stay fixed like a Hero Banner. The scrolling speed will be equal to your scrolling speed when it’s set at 1.

Extra Class

If you wish to customize the element in a particular way, kindly use this field to add a class name and refer to it in the CSS file.

 

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article

 

That's it! If you're interested in learning more about the powerful and user-friendly GemPages, feel free to explore the Help Center or get in touch with our delicate customer support via email or live chat.


Was this helpful?