Vertical Marquee

The vertical-marquee plugin creates an infinite vertical scrolling animation, typically used for displaying columns of content like images or cards. It leverages a custom Tailwind CSS animation class for smooth, continuous movement, with the ability to easily override the animation duration via data attributes.

In development, it is implemented in assets/js/modules/vertical-marquee.js and is initialized automatically by assets/js/main.js.

Markup Requirements

To use the plugin, simply add the data-vertical-marquee attribute to a wrapper element containing the items you want to scroll.

Notes:

The plugin automatically applies the animate-[marquee-vertical_60s_linear_infinite] Tailwind class to the element on window load to ensure the JIT compiler generates the CSS.
You can override the default 60-second duration by providing a specific time value directly to the dataset attribute (e.g., data-vertical-marquee="70s").
The scrolling animation is driven entirely by CSS, ensuring high performance.
For a seamless infinite loop effect, you should duplicate the marquee block within your layout.

Markup Example

Below is an example markup of the plugin used on image columns from the landing page. Key details are included in the HTML comments:


<!-- Start: Vertical marquee container with gradient mask for fading edges -->
<div class="flex w-full flex-col gap-8 mask-[linear-gradient(to_bottom,transparent,#000_20%,#000_80%,transparent)]">
  
  <!-- Start: First marquee block with custom 70s duration -->
  <div data-vertical-marquee="70s" class="flex w-full flex-col gap-8">
    <figure class="w-full overflow-hidden rounded-lg">
      <img src="imgs/landing-page/statixflow-section-7.webp" alt="" class="h-auto max-w-full" />
    </figure>
    <figure class="w-full overflow-hidden rounded-lg">
      <img src="imgs/landing-page/statixflow-section-17.webp" alt="" class="h-auto max-w-full" />
    </figure>
  </div>
  <!-- End: First marquee block with custom 70s duration -->
 
  <!-- Start: Duplicated marquee block for seamless infinite scrolling -->
  <div data-vertical-marquee="70s" class="flex w-full flex-col gap-8">
    <figure class="w-full overflow-hidden rounded-lg">
      <img src="imgs/landing-page/statixflow-section-7.webp" alt="" class="h-auto max-w-full" />
    </figure>
    <figure class="w-full overflow-hidden rounded-lg">
      <img src="imgs/landing-page/statixflow-section-17.webp" alt="" class="h-auto max-w-full" />
    </figure>
  </div>
  <!-- End: Duplicated marquee block for seamless infinite scrolling -->
 
</div>
<!-- End: Vertical marquee container -->

Demo Example

View the complete code sample on this page.

Landing page