Compatibility:

WebSite X5 Evo and Pro

Do you want to create a strip where the background image moves while scrolling at a different pace from the foreground contents?


With the parallax effect, you can give the Page greater depth and highlight a Section while browsing. In WebSite X5, you can apply the effect to the background of a Section and choose between Parallax, Reverse Parallax, and Fixed Parallax.


What is parallax and why should you use it?

The parallax effect uses the different movement of the background and foreground contents to create a sense of depth while scrolling.


In WebSite X5, you can choose between three types of effect:

  • Parallax: the background image scrolls in the same direction as the foreground contents, but at a different pace;
  • Reverse Parallax: the background image scrolls in the opposite direction to the contents;
  • Fixed Parallax: the background appears to remain still while the contents scroll over it.


You can also adjust the Depth, i.e. the perceived distance between the background and the foreground contents: by changing this value, you can make the effect more or less noticeable.



How to choose the background image

For the movement of the parallax effect to be noticeable, the images used as backgrounds need to be taller than the strip in which they are displayed. In general, the greater the difference between the height of the background image and the height of the strip, the more noticeable the parallax effect will be.


Also make sure the image has sufficient quality to be displayed at the intended size without losing definition.



How to set the parallax effect 

To apply the parallax effect to the background of a Section, proceed as follows:

  • Go to Step 4 - Pages and open the page you want to work on.
  • Make sure the relevant contents are organized in the Section to which you want to apply the effect.
  • Click the Section Style button.
  • Select the Section you want to customize.
  • In the Background menu, select Image.
  • Import the image you want to use and define its settings.
  • Click the Parallax button.
  • In the window that opens, choose the effect you want to use from:
    • Parallax;
    • Reverse Parallax;
    • Fixed Parallax.
  • Set the Depth to adjust the intensity of the effect. 
  • Confirm the settings.


#tip - The parallax effect is based on background movement and cannot be perceived when using a uniform solid-color background.


How to extend the background to full width

The parallax effect does not necessarily require the strip to fill the entire width of the Browser window.


If, however, you want to achieve this result, in the Section Style window also activate Extend to the width of the Browser window.


This way, the Section background, including the parallax effect, is extended to the edges of the window, while the Objects continue to be organized according to the Layout Grid structure.


#tip - For more information, see How do you create a full-width strip?


Accessibility

To make your website pages accessible, consider providing alternative text for the images you use.


You can mark an image as decorative or enter ALT text using the button available in the field where you import the file.


#tip - For more information, see How to write alternative text for non-text content on pages.


Practical tips

For a good result:

  • choose images that are large enough and of good quality;
  • adjust the Depth so that the movement is noticeable without being excessive;
  • avoid applying the parallax effect to too many Sections on the same Page;
  • make sure texts and other contents remain clearly readable against the background;
  • always check the result in Preview and at different Browser window sizes.


#tip - Alternatives. If you do not want to apply the parallax effect to a Section background but to a single image added to the Page, try the Parallax Image Optional Object.