The updated list of jQuery Parallax plugins and simple fullwidth images used in Matrix Themes with examples and code.
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.
<div class="is-fullwidth bg-section rel is-parallax" style="background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1563355879') no-repeat center;">
<div class="hs-overlay bg-dark">
</div>
<div class="inner rel color-white m-padding text-center cc-clearover" style="padding:250px 0;">
<h1 class="">
This is a fixed image
</h1>
<p>
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.
</p>
<br />
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
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.
<div class="container is-fullwidth" data-parallax="scroll" data-image-src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1563355879">
<div class="is--flex h-100 w-100">
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding text-center cc-clearover" style="padding:250px 0;">
<h1 class="">
A simple parallax image
</h1>
<p>
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.
</p>
<br />
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>
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.
<section class="container rel is-fullwidth h-100">
<div class="is--flex h-100 w-100">
<div class="parallax" data-parallax-image="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1563355879">
</div>
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding left-align cc-clearover" style="padding:150px 0;">
<h1 class="">
This is Universal Parallax
</h1>
<p>
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.
</p>
<br />
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</section>
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.
<div class="enllax is-fullwidth" style="background: url(https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1563355879);" data-enllax-bgoffset="100" data-enllax-ratio="0.5"
data-enllax-direction="vertical">
<div class="is--flex h-100 w-100">
<div class="hs-overlay opacity-6">
</div>
<div class="inner rel color-white m-padding left-align cc-clearover" style="padding:150px 0;">
<h1 class="">
This is enllax parallax 1
</h1>
<p>
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.
</p>
<br />
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>
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.
<div class="enllax is-fullwidth" style="background: url(https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1563355879);" data-enllax-ratio="0.5" data-enllax-direction=
"horizontal">
<div class="is--flex h-100 w-100">
<div class="hs-overlay opacity-6">
</div>
<div class="inner rel color-white m-padding text-left cc-clearover" style="padding:250px 0;">
<h1 class="">
This is enllax parallax 2
</h1>
<p>
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.
</p>
<br />
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>