ParallaxPRO
Create a sense of depth in your site using a parallax component.
Optional plugin
As this plugin is a non-Bootstrap JavaScript plugin, it should be considered as an optional extension and be removed when not in use, in order to improve page load times. Instructions on how to deal with plugins can be found here.
An image wrapped in a .parallax-container and .parallax element scrolls with the page at a different speed. This creates a sense of depth and reveals new parts of the image when scrolling.
The default height of a parallax element is 500px, but this can easily be adjusted with custom CSS to fit your needs.
<div class="parallax-container" style="height:300px;">
<div class="parallax">
<img src="/solid/img/demo-landscape.jpg">
</div>
</div>
You may need to change the height of your viewport in order to scroll to see the effect.
JavaScript behavior
Parallax elements are initialized on .parallax elements by default, but you may use the following function to initialize it on custom elements:
$('.parallax').parallax();