Paralax
Parallax is a visual effect where items closer to the viewer move faster than items in the background. Parallax creates a feeling of depth, perspective, and movement.
In these examples i made use of parallax.js.
Code
<div class="js-parallax-window vmin-60 bg-faded"
data-parallax="scroll"
data-image-src="/fluent-bootstrap/img/photo-1430418372158-66adfd0d88cb.jpg">
</div>Add items to the paralax
And so on, just add items to your paralax and enjoy!
Assumenda debitis
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda debitis dolorum et ipsam nesciunt odit officia omnis sed soluta vel! Autem cupiditate hic laborum, magnam odio quia quisquam sed. At?
This is a button
Dicta molestiae
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos esse expedita incidunt necessitatibus voluptatem. Accusamus blanditiis corporis delectus doloremque impedit nihil numquam odio praesentium rem repellendus. Dicta molestiae quibusdam sit!
This is a button
Deserunt, porro?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid aut beatae cumque dolores ducimus eos id illum ipsa iste maxime, numquam officiis perferendis sed suscipit tenetur veniam. Deserunt, porro?
This is a buttonCode
<div class="js-parallax-window vmin-60"
data-parallax="scroll"
data-image-src="/fluent-bootstrap/img/photo-1431440869543-efaf3388c585.jpg">
<div class="px-3 py-3">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-3 pb-3">
<img src="/fluent-bootstrap/img/photo-1466278313810-9aca9abea861.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-5 pb-3">
<h4>Assumenda debitis</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda debitis dolorum et ipsam
nesciunt odit officia omnis sed soluta vel! Autem cupiditate hic laborum, magnam odio quia
quisquam sed. At?
</p>
<a href="#" class="btn btn-outline-light">This is a button</a>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 pb-3">
<img src="/fluent-bootstrap/img/photo-1466278313810-9aca9abea861.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-5 pb-3">
<h4>Dicta molestiae</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos esse expedita incidunt
necessitatibus voluptatem. Accusamus blanditiis corporis delectus doloremque impedit nihil
numquam odio praesentium rem repellendus. Dicta molestiae quibusdam sit!
</p>
<a href="#" class="btn btn-outline-light">This is a button</a>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 pb-3">
<img src="/fluent-bootstrap/img/photo-1466278313810-9aca9abea861.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-5 pb-3">
<h4>Deserunt, porro?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid aut beatae cumque
dolores ducimus eos id illum ipsa iste maxime, numquam officiis perferendis sed suscipit
tenetur veniam. Deserunt, porro?
</p>
<a href="#" class="btn btn-outline-light">This is a button</a>
</div>
</div>
</div>
</div>
</div>