Create a sense of depth in your site using a parallax component.
An image wrapped in a
.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.
Parallax elements are initialized on
.parallax elements by default, but you may use the following function to initialize it on custom elements: