Parallax

Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with NO dependencies + jQuery supported. YouTube, Vimeo and Local Videos parallax supported.

Official Documentation

Please Note: we already added plugin CSS and JS file in vendors.bundle.{css/js}. you can exclude it by using gulp task. you also can add them manually if you want.

How it works

.jarallax class initialize the parallax. it also works as a wrapper container. pass settings option using HTML5 data-*="" attribute. 

<!-- Background Image Parallax -->
<div class="jarallax">
    <img class="jarallax-img" src="<background_image_url_here>" alt="">
    Your content here...
</div>

<!-- Background Image Parallax with <picture> tag -->
<div class="jarallax">
    <picture class="jarallax-img">
        <source media="..." srcset="<alternative_background_image_url_here>">
        <img src="<background_image_url_here>" alt="">
    </picture>
    Your content here...
</div>

<!-- Alternate: Background Image Parallax -->
<div class="jarallax" style="background-image: url('<background_image_url_here>');">
    Your content here...
</div>

Parallax

Different parallax speed

Set parallax speed using data-speed="0.5"