jarallax-hero-with-stats

Summary

Full-viewport (min-height 900px) photo hero with a parallax-scrolled background, eyebrow subtitle, oversized headline, supporting paragraph, satisfied-clients social proof with stacked avatars, and a four-column service ticker pinned to the bottom.

HTML structure (minimal)

<section class="jarallax section-dark relative overflow-hidden mh-900 text-light">
  <img src="images/background/1.webp" class="jarallax-img" alt="">
  <div class="abs w-100 bottom-0 z-2">
    <div class="container">
      <div class="row g-4 gx-5 align-items-end">
        <div class="col-lg-8">
          <div class="subtitle text-light mb-3 wow fadeInUp">Welcome to Regalis</div>
          <h1 class="wow fadeInUp" data-wow-delay=".2s">Transforming Equity With Precision And Gentle</h1>
          <p class="col-lg-10 wow fadeInUp" data-wow-delay=".4s">We provide trusted legal representation...</p>
        </div>
        <div class="col-lg-4 text-end">
          <div class="d-flex justify-content-end align-items-center wow fadeInUp" data-wow-delay=".9s">
            <div class="fw-600 fs-14 lh-1-5">
              <span class="fs-18 text-white fw-bold">2300+</span><br>Satisfied Clients
            </div>
            <div class="relative ms-4">
              <img src="images/testimonial/1.webp" class="w-50px circle ms-min-10" alt="">
              <img src="images/testimonial/2.webp" class="w-50px circle ms-min-10" alt="">
              <img src="images/testimonial/3.webp" class="w-50px circle ms-min-10" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="spacer-double"></div>
      <div class="row g-4 sm-hide">
        <div class="col-lg-12">
          <div class="d-flex justify-content-between">
            <div class="wow fadeInRight" data-wow-delay=".4s"><div class="text-white fw-600">Contract Case Handling</div></div>
            <div class="wow fadeInRight" data-wow-delay=".6s"><div class="text-white fw-600">Strategic Legal Advisory</div></div>
            <div class="wow fadeInRight" data-wow-delay=".8s"><div class="text-white fw-600">Tailored Legal Solutions</div></div>
            <div class="wow fadeInRight" data-wow-delay="1s"><div class="text-white fw-600">Court-Prepared Documentation</div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="gradient-edge-bottom color"></div>
</section>

Key SCSS tokens

.mh-900 { min-height: 900px; }
.jarallax { position: relative; overflow: hidden; }
.jarallax-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -100;
}
.abs { position: absolute; }
.ms-min-10 { margin-left: -10px; }   /* avatar overlap */
.circle { border-radius: 50%; }
.gradient-edge-bottom {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(180deg, transparent, var(--primary-color));
}
section.section-dark { color: #fff; }

Animation logic

// jarallax: parallax on scroll
jarallax(document.querySelectorAll('.jarallax'), { speed: 0.5 });

// WOW.js: data-wow-delay drives staggered fadeInUp on subtitle, h1, p,
// stat strip and four-column service ticker (delays .0s → 1s)
new WOW({ live: false }).init();

Notable details

• Content sits in .abs.bottom-0 so the headline aligns with the image's bottom edge — feels anchored, not floating.
• Stacked avatars use negative margin-left: -10px (ms-min-10) for the classic "+N people" overlap.
• Bottom service ticker is staggered .4s → 1s with fadeInRight so it reads left-to-right after the hero copy lands.
• A 1px gradient strip at the very bottom blends the photo into the next section's primary color.

Use when

• Law, finance, consulting or premium-services landing pages where photography carries the brand.
• Any page that needs a single hero number ("2300+ Satisfied Clients") to feel embedded with the photo, not stuck in a stat strip.
• Templates with multiple home variants — this hero is reused across all 10 index pages with different photos.

Caveats

• mh-900 enforces a hard pixel min-height; on short screens this clips below the fold. Consider switching to min-height: 100vh for tablet.
• jarallax requires the image to be a child <img> of the .jarallax parent — not a CSS background-image.