The updated list of jQuery Parallax plugins and simple fullwidth images used in Matrix Themes with examples and code.
Fullwidth image
Fixed image with caption
This is a fixed image
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.
Custom button
<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>
Simple parallax effect
A simple parallax image
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.
Custom button
<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>
Universal parallax
This is Universal Parallax
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.
Custom button
<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>
Enllax parallax 1
This is enllax parallax 1
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.
Custom button
<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>
Enllax parallax 2
This is enllax parallax 2
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.
Custom button
<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>
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE