Component – Ticker

News-like Horizontal Scrolling ListDownload + DemoView DemoDownload ComponentHow 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 anima…


This content originally appeared on CodyHouse and was authored by CodyHouse

News-like Horizontal Scrolling ListTicker

Download + Demo

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).


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-06-09T13:04:24+00:00) Component – Ticker. Retrieved from https://www.scien.cx/2021/06/09/component-ticker/

MLA
" » Component – Ticker." CodyHouse | Sciencx - Wednesday June 9, 2021, https://www.scien.cx/2021/06/09/component-ticker/
HARVARD
CodyHouse | Sciencx Wednesday June 9, 2021 » Component – Ticker., viewed ,<https://www.scien.cx/2021/06/09/component-ticker/>
VANCOUVER
CodyHouse | Sciencx - » Component – Ticker. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/09/component-ticker/
CHICAGO
" » Component – Ticker." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/06/09/component-ticker/
IEEE
" » Component – Ticker." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/06/09/component-ticker/. [Accessed: ]
rf:citation
» Component – Ticker | CodyHouse | Sciencx | https://www.scien.cx/2021/06/09/component-ticker/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts