Vendor : Jarallax

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.

License: MIT
https://github.com/nk-o/jarallax
src/js/vendors/vendor.jarallax.js

Jarallax Element

Preview
HTML

X and Y

This has a little bug – not firing on Ajax, only on regular pages. Refresh to see it in action! All others (image/video) are working without issue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum.

                  
                    <div class="p-5">

                      <p class="lead" data-jarallax-element="-40 50">X and Y</p>
                      <p class="lead" data-jarallax-element="-40">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum.
                      </p>

                    </div>

Smarty Multipurpose

lightweight • scallabe • modern

Get Smarty

                  
                    <div class="jarallax overlay-dark overlay-opacity-5 d-flex align-items-center justify-content-center text-white" 
                      style="background-image:url('../demo.files/images/unsplash/covers/nicolas-ramirez-b-9fXiJOooY-unsplash.jpg')" 
                      data-speed="1.4">
                      
                      <!-- optional content -->
                      <div class="text-center py-7 my-5">

                        <h1 class="m-0">Smarty Multipurpose</h1>
                        <p>lightweight • scallabe • modern</p>

                        <p class="mt-5 mb-0">
                          <a href="https://wrapbootstrap.com/theme/smarty-website-admin-rtl-WB02DSN1B" class="btn btn-pill btn-light transition-hover-top">
                            Get Smarty
                          </a>
                        </p>

                      </div>

                    </div>

Jallax Local Video

Preview
HTML

Smarty Multipurpose

lightweight • scallabe • modern

Get Smarty

                  
                    <div class="jarallax bg-cover overlay-dark overlay-opacity-5 d-flex align-items-center justify-content-center text-white" 
                      style="background-image:url('../demo.files/video/hd0936.jpg')" 
                      data-jarallax-video="mp4:../demo.files/video/hd0936.mp4,webm:../demo.files/video/hd0936.webm,ogv:../demo.files/video/hd0936.ogv" 
                      data-speed="1.4">

                      <!-- optional content -->
                      <div class="text-center py-7 mt-5">

                        <h1 class="m-0">Smarty Multipurpose</h1>
                        <p>lightweight • scallabe • modern</p>

                        <p class="mt-5 mb-0">
                          <a href="https://wrapbootstrap.com/theme/smarty-website-admin-rtl-WB02DSN1B" class="btn btn-pill btn-light transition-hover-top">
                            Get Smarty
                          </a>
                        </p>

                      </div>
                      
                    </div>

Jarallax Youtube Video

Preview
HTML

Smarty Multipurpose

lightweight • scallabe • modern

Get Smarty

                  
                    <div class="jarallax bg-cover overlay-dark overlay-opacity-5 d-flex align-items-center justify-content-center text-white" 
                      style="background-image:url('https://img.youtube.com/vi/ab0TSkLe-E0/maxresdefault.jpg')" 
                      data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0" 
                      data-speed="1.2">

                      <!-- optional content -->
                      <div class="text-center py-7 my-5">

                        <h1 class="m-0">Smarty Multipurpose</h1>
                        <p>lightweight • scallabe • modern</p>

                        <p class="mt-5 mb-0">
                          <a href="https://wrapbootstrap.com/theme/smarty-website-admin-rtl-WB02DSN1B" class="btn btn-pill btn-light transition-hover-top">
                            Get Smarty
                          </a>
                        </p>

                      </div>
                      
                    </div>