Minimal Text Ticker With CSS3 And Vanilla JavaScript – tickit

Preview:

Description:

tickit is a vanilla JavaScript ticker library that uses CSS3 transitions to rotate through an array of text at a certain speed.

How to use it:

Put the CSS file in the document’s head section.

<link href="tickit.css" rel="stylesheet">

Create a container for the ticker.

<div id="tickit" class="tickit">
  <div class="tickit-inner js-tickit-inner"></div>
</div>

Put the JavaScript file at the end of the document.

<script src="tickit.js"></script>

Pass the following configs to the ticker.

var config = {
    data: ['item 1', 'item 2', 'item 3'],
    selector: '#tickit',
    duration: 1000,
    initialPos: -15,
    behavior: 'scroll'
};

Initialize the ticker.

var ticker = Tickit(config).init();

References.

• config: Tickit configuration values.
• config.data: The text to display.
• config.selector: The id for the container element.
• config.duration: The animation duration.
• config.initialPos: The initial offset position.
• config.behavior: The user interaction behavior.