HTML:
<!-- Hero Section -->
<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/1920x1080/img1.jpg);"></div>
<!-- Content -->
<div class="js-scroll-effect position-relative"
data-scroll-effect="smoothFadeToBottom">
<div class="container u-space-5-top u-space-1-bottom">
<div class="text-center w-lg-80 mx-auto u-space-3-bottom">
<h1 class="display-4 font-size-48--md-down text-white font-weight-normal mb-0">Announcing a free plan for small teams</h1>
</div>
<!-- Author -->
<div class="text-center">
<img class="img-fluid u-sm-avatar rounded-circle mb-2" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
<span class="d-block">
<a class="text-white h6 mb-0" href="#">Andrea Gard</a>
</span>
</div>
<!-- End Author -->
</div>
</div>
<!-- End Content -->
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/dzsparallaxer/dzsparallaxer.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
<!-- JS Front -->
<script src="assets/vendor/js/components/hs.scroll-effect.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of scroll effect component
$.HSCore.components.HSScrollEffect.init('.js-scroll-effect');
});
</script>
