rolling-skills-marquee

Summary

Two stacked horizontal marquees of services ("Web Design / Web Development / Seo eCommerce / Digital Marketing / UI/UX Design") separated by a star glyph between each item. Top rail has filled white text and slides one direction; bottom rail uses text-stroke: 1px outline-only text and slides the other way. Pure CSS keyframe animation; no JS measurement.

HTML structure (minimal)

<section class="opacity-7">
  <div class="main-marq xlrg o-hidden">
    <div class="slide-har st1 strok">
      <div class="box">
        <!-- repeat for each item, twice for the seamless loop -->
        <div class="item">
          <h4 class="d-flex align-items-center">
            <span>Web Design</span>
            <span class="icon-img-50 ml-40"><img src="/assets/imgs/star.png" alt="" /></span>
          </h4>
        </div>
        <!-- ... -->
      </div>
      <div class="box"><!-- duplicate for loop --></div>
    </div>
  </div>
  <div class="main-marq xlrg o-hidden">
    <div class="slide-har st2 non-strok">
      <div class="box"><!-- same items, opposite direction --></div>
      <div class="box"><!-- ... --></div>
    </div>
  </div>
</section>

Key SCSS tokens

.main-marq {
  &.xlrg .item h4 { font-size: 120px; line-height: 1; font-weight: 600; }
  .slide-har { display: flex; }
  .slide-har .box { flex-shrink: 0; display: flex; }
  .slide-har.st1 { animation: marqLeft 30s linear infinite; }
  .slide-har.st2 { animation: marqRight 30s linear infinite; }
  .strok h4 {
    -webkit-text-stroke: 1px #fff;
    color: transparent;
  }
}
@keyframes marqLeft  { 0% { transform: translateX(0)    } 100% { transform: translateX(-50%) } }
@keyframes marqRight { 0% { transform: translateX(-50%) } 100% { transform: translateX(0)    } }

Notable details

• Items are duplicated inside two identical .box siblings; the keyframe translates -50%, so the loop is seamless without requestAnimationFrame.
• strok modifier is a text-stroke outline — pairs visually with the filled rail above for an op-art feel.
• Star glyph between items is an <img> not a CSS pseudo, so it scales independently of the text.

Use when

• Section dividers in agency / portfolio sites where you'd otherwise leave dead space.
• Hero CTA bands; replace the items with action verbs.

Caveats

• Long words push the cycle period out — re-tune the 30s duration if your items differ in length.
• Mobile widths still animate at the same 30s; consider clamping to prefers-reduced-motion: no-preference.