Jarallax

NO dependencies JavaScript parallax scrolling.

How to install?

Add script right before closing </body> tag, and initialize Jarallax

                
                  <!-- Plugin js -->
                  <script src="src/plugins/jarallax/dist/jarallax.min.js"></script>

                  <!-- Theme js -->
                  <script src="src/js/theme.js"></script>

If you want to remove Jarallax js editing theme.js in this function myJarallax();

Example


title
1500+
Customers
250+
Company
520+
Running
450+
Complete 
                
                  <section id="counters" class="relative py-16 md:py-24 border-t border-b border-gray-200 z-0 jarallax">
                    <!-- background parallax -->
                    <img class="jarallax-img" src="src/img-min/bg/bg3.jpg" alt="title">

                    <div class="container xl:max-w-6xl mx-auto px-4">
                      <div class="flex flex-wrap flex-row -mx-4 text-center uppercase">
                        <div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
                          <div class="p-6 bg-white rounded-md border border-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 relative mb-6 lg:mb-0">
                            <h5 class="text-lg leading-normal mb-2 font-bold text-blue-700">
                              <span class="counter">1500</span><span class="text-sm">+</span>
                            </h5>
                            <small class="d-block font-style-normal text-uppercase text-primary u-letter-spacing-sm">Customers</small>
                          </div>
                        </div>

                        <div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
                          <div class="p-6 bg-white rounded-md border border-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 relative mb-6 lg:mb-0">
                            <h5 class="text-lg leading-normal mb-2 font-bold text-blue-700">
                              <span class="counter">250<span class="text-sm">+</span></span>
                            </h5>
                            <small class="d-block font-style-normal text-uppercase text-primary u-letter-spacing-sm">Company</small>
                          </div>
                        </div>

                        <div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
                          <div class="p-6 bg-white rounded-md border border-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 relative mb-6 lg:mb-0">
                            <h5 class="text-lg leading-normal mb-2 font-bold text-blue-700">
                              <span class="counter">520<span class="text-sm">+</span></span>
                            </h5>
                            <small class="d-block font-style-normal text-uppercase text-primary u-letter-spacing-sm">Running</small>
                          </div>
                        </div>

                        <div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
                          <div class="p-6 bg-white rounded-md border border-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 relative mb-6 lg:mb-0">
                            <h5 class="text-lg leading-normal mb-2 font-bold text-blue-700">
                              <span class="counter">450<span class="text-sm">+</span></span>
                            </h5>
                            <small class="d-block font-style-normal text-uppercase text-primary u-letter-spacing-sm">Complete</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>

For complete documentation read in here