Our template used the power of Jarallax JS which lets you add parallax images and videos to sections throughout your site. Lets take a look at a typical example of what a parallax section looks like
<section class="page-title-area h-40 o-hidden bg-feature jarallax" data-jarallax data-speed="0.2"> <img class="jarallax-img" src="assets/images/blog-hero-1.jpg" alt="Blog Hero"> CONTENT HERE </section>
It may look complex, but its very simple. The 1st thing you need to do is give your section the class “jarallax”, as well as the custom data-attribute “data-jarallax” – this will trigger the special JS needed for the effect to work.
From there you can alter the parallax speed by modifying the “data-speed” attribute as you wish. Next to add the actual image, like you see in the example above, just at the opening of your sections code, add the image (with the class “jarallax-img” added to it) and your all set.
Adding Videos
Jarallax can also use videos and background layers, the process is the same as above, only for a video you dont need to add any image, instead you add the URL of your YouTube/Vimeo video via the special data attribute
data-jarallax-video="https://www.youtube.com/watch?v=_8aO_8fX2Z8"
Giving you a result like this
<section class="page-title-area h-40 o-hidden bg-feature jarallax" data-jarallax data-speed="0.2" data-jarallax-video="https://www.youtube.com/watch?v=_8aO_8fX2Z8"> CONTENT HERE </section>
For more details on how to use Jarallax see the repository.
