Jarallax

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

Plugin homepage

Demo

Nulla erat luctus cras nascetur ipsum non feugiat dignissim est praesent aliquet, id vehicula vel volutpat condimentum sociosqu posuere quisque justo commodo orci, faucibus torquent varius nec nunc lacinia nisl sapien nam risus.

Markup

Add data-jarallax attribute and .jarallax class to your element. Also you can tune parallax speed with data-speed option.

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

<!-- Background Image Parallax with <picture> tag -->
<div class="jarallax" data-jarallax data-speed="0.2">
    <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" data-jarallax data-speed="0.2" style="background-image: url('<background_image_url_here>');">
    Your content here...
</div>

Background video markup

<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
    Your content here...
</div>

<!-- Background Vimeo Parallax -->
<div class="jarallax" data-jarallax-video="https://vimeo.com/110138539">
    Your content here...
</div>

<!-- Background Self-Hosted Video Parallax -->
<div class="jarallax" data-jarallax-video="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
    Your content here...
</div>