Jarallax

                
                  <p class="lead" data-jarallax-element="-40 50" data-speed="1.4">X and Y</p>

                  <p class="lead" data-jarallax-element="-40" data-speed="1.4">
                    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>
                
              

                
                  <!-- Vendor : Jarallax -->
                  <script src="../assets/vendors/jarallax/dist/jarallax.min.js"></script>
                  <script src="../assets/vendors/jarallax/dist/jarallax-element.min.js"></script>
                
              

                
                  <div class="position-relative jarallax overlay-dark overlay-opacity-25 d-flex align-items-center justify-content-center text-white bg-cover py-8" style="background-image:url(../demo.files/images/unsplash/idin-ebrahimi-JXPP3xFbb-k-unsplash.jpg)">

                    <div class="py-6 text-center">

                      <h2 class="m-0 display-4">
                        Jarallax Image
                      </h2>

                    </div>

                  </div>
                
              

                
                  <!-- Vendor : Jarallax -->
                  <script src="../assets/vendors/jarallax/dist/jarallax.min.js"></script>
                  <script>
                    document.addEventListener('DOMContentLoaded', function() {
                      jarallax( document.querySelectorAll('.jarallax') );
                    });
                  </script>
                
              

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

                    <div class="py-6 text-center">

                      <h2 class="m-0 display-4">
                        Local Video
                      </h2>

                    </div>
                    
                  </div>
                
              

                
                  <!-- Vendor : Jarallax -->
                  <script src="../assets/vendors/jarallax/dist/jarallax.min.js"></script>
                  <script src="../assets/vendors/jarallax/dist/jarallax-video.min.js"></script>
                  <script>
                    document.addEventListener('DOMContentLoaded', function() {
                      jarallax( document.querySelectorAll('.jarallax') );
                    });
                  </script>
                
              

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

                    <div class="py-6 text-center">

                      <h2 class="m-0 display-4">
                        Youtube Video
                      </h2>

                    </div>
      
                  </div>
                
              

                
                  <!-- Vendor : Jarallax -->
                  <script src="../assets/vendors/jarallax/dist/jarallax.min.js"></script>
                  <script src="../assets/vendors/jarallax/dist/jarallax-video.min.js"></script>
                  <script>
                    document.addEventListener('DOMContentLoaded', function() {
                      jarallax( document.querySelectorAll('.jarallax') );
                    });
                  </script>