Parallax
Turn your content into a beautiful and smooth parallax effect.
How to use?
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
Basic example
Parallax
Presented by the Space's most generous community of creatives.
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
<!-- Apply your Parallax background image here -->
<div class="divimage dzsparallaxer--target" style="height: 130%; background-image: url(../../assets/img/1920x800/img5.jpg);"></div>
<div class="container space-3">
<div class="text-center w-lg-80 mx-auto">
<h1 class="text-white display-1 font-size-48--md-down font-weight-medium">Parallax</h1>
</div>
<div class="text-center w-lg-40 mx-auto">
<p class="lead text-light-70">Presented by the Space's most generous community of creatives.</p>
</div>
</div>
</div>
Official Documentation
For more detailed information, see the official documentation: Dzsparallaxer documentation.