Compatibility:

Parallax Effect: WebSite X5 Evo and Pro since version 13 

Inverse and Fixed Parallax: WebSite X5 Evo and Pro since version 14

When surfing online, you have surely bumped into pages having some areas with a large background image moving at a different speed compared to the foreground contents when scrolling down the page. This is the parallax effect. We ourselves have used it on many of templates, such as Photogram or Camping - SilverCamp. Now you can use it too to make your projects special.


Using the parallax effect on your pages is easier that you think. Watch this video to learn how to do it, or keep reading.



What is the parallax effect and why should I use it?

The parallax effect is a visual technique you can use to create a 3D illusion of depth and enrich your graphic layout by making the images move at different speed and perspectives. This effect turns the page scrolling into a more engaging experience for your visitors.

In other words, it is as if the pages were created on 2 levels: the background and the foreground level. The end result changes slightly according to the following parameters:

  • the scrolling direction: the background images can move upwards too, while the foreground contents can't;
  • the scrolling speed: background and foreground contents can move at different speed;
  • the depth, i.e. the "distance" between the background and the foreground level. By increasing the depth, the possible different scrolling speed becomes more visible.


Thanks to the parallax effect, you can create unique pages and highlight the most important contents, as well as make the browsing on your website more effective and lead your visitors to the CTA, the Call To Action buttons to invite the visitor to carry out a specific action.


How to prepare the images?

In order for the parallax effect to function properly and for the visitors to detect the different speed the images move at, the background image must have a greater height than the band it is inserted in. The greater the difference between the image and the band height, the more the parallax effect will be visible.


How to set the parallax effect?

Now that your images are ready, you just need to follow these steps to set the parallax effect:

  • Go to the page you want to work at on Step 4 - Page Creation.
  • Click on the Row Formats button in the toolbar.
  • In the Row Formats window, stay in the General section and select the row you want to work at.
  • Select the Image option in the Background section. 
#tip - Formats. You can use a color, a gradient, one or more images, a video or a map for your Background. If you set a colored background you can't activate the parallax effect, as it isn't possible to perceive the movement of a picture in the foreground if it is placed on a uniform and monochromatic shade.
  • Import the background  image you want to use and position it in the available space.
  • Click on the Extend to the width of the browser window option to extend the effect to the full browser width.
  • Click on Parallax  and select one of the available options according to the result you want to get:
    • Parallax: background image and foreground contents move in the same direction;
    • Inverse Parallax: the background image and the foreground contents move in opposite directions;
    • Fixed Parallax: background image and foreground contents move at the same speed, so it seems like the image stays still.
  • Set a Depth, i. e. the distance between contents and background.
  • Click OK when you're happy with the result.


#tip - Alternatives. If you don't want to create a horizontal band but apply the parallax effect to a single image instead, so may want to try out the Parallax Image Optional Object.