Go to homepage

Projects /

Ticker

News-like Horizontal Scrolling List

View Demo

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

How To

The Ticker component is used to create a list of horizontally scrolling items.

By default, the list translates from right to left. To reverse the direction of the animation, add the .ticker--reverse class to the .ticker element.

If you want to pause the animation on hover, add a data-ticker-pause-hover="on" attribute to the .js-ticker element:

<div class="ticker js-ticker" data-ticker-pause-hover="on">
  <!-- ... -->
</div>

Horizontal Gap #

To control the horizontal gap among the list items, use the --ticker-gap-x custom property:

<div class="ticker js-ticker" style="--ticker-gap-x: var(--space-md);">
  <!-- ... -->
</div>

Pause Button #

The Ticker comes with the option of adding a pause/play button. Make sure to add, to the control button, an aria-controls attribute equal to the id of the ticker element:

<button class="js-ticker-control js-tab-focus" aria-controls="ticker" aria-label="pause animation" aria-pressed="false">Toggle Ticker</button>

<div class="ticker js-ticker" id="ticker">
  <ul class="ticker__list">
    <!-- list items here -->
  </ul>
</div>

Image Width #

If you're using the plugin to animated a list of images, make sure to add the .ticker__img class to each image element, and set the --ticker-img-width custom property to control the width of the images (see --v3 demo).

If you're using inline SVG images, make sure to set the inline width on the SVG element. Optionally, you can control the color of the SVG elements by using the fill and color utility classes (see --v2 demo).

Categories

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.