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:
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
Look around and catch opportunities everywhere in order to clear your mind and take your abilities to the next level.
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
To ensure the best results when using our parallax widgets, please note the following:
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>
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:
Caption styles
The whole block of the text can be customized with the following options:
<div class="col-6 center-align">