PArallax issue

Last Updated: 15.02.2023

Parallax or parallax scrolling is a web site trend where the background content (for example, an image) is moved at a different speed than the foreground content while scrolling. The Matrix Themes include more than one js plugin to achieve such effect. This support page include all options.

The shortcodes of Parallax widget can be found in Matrix Themes admin menu > Add-ons> Parallax.

Here you will find  the following versions of Parallax widget:

• simple full width image
• jarallax
• enllax
• universal parallax

To ensure the best results when using our parallax widgets, please note the following:

• All parallax widgets can only be edited in Widget/HTML, and certain widgets may have varying effects in admin mode. For the final result, please check your page in view mode to ensure optimal functionality.
• When adding the Universal parallax widget to your website, you may notice that images do not display immediately. In this case, it may be necessary to refresh the page to achieve the desired effect. Please note that some mobile browsers may display a fixed image instead of the full parallax effect.

Overlay

The parallax widgets include the background image and the text on it. To ensure that the text is clearly visible, the background image has the dark overlay. You can remove it or simply add any other classes for the background overlay color:

<div class="hs-overlay opacity-8">
  </div>

• opacity-8
• opacity-6
• opacity-4
• bg-primary
• bg-red
• ...

Image size

The background image size is defined by the class h-100 ( min-height:100vh;) or inline style  that can be easy customized for your needs:

<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">

The same line includes some useful helper classes:

• color-white - makes your text white, otherwise the color will be the same as the global text of your website
• m-padding - this class applies the value: padding-top:100px; padding-bottom:100px; for mobile devices which overwrites the inline styles ( in order to avoid too big images)

Caption styles

The whole block of the text can be customized with the following options:

<div class="col-6 center-align">

• col-6 - width 50%
• .
• .
• .
• col-12 - width 100%
• left-align
• center-align
• right-align