Minimal Text Ticker With CSS3 And Vanilla JavaScript – tickit

Category: Javascript , Text | March 2, 2016
Author:jonchretien
Views Total:1,958 views
Official Page:Go to website
Last Update:March 2, 2016
License:MIT

Preview:

Minimal Text Ticker With CSS3 And Vanilla JavaScript – tickit

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.

You Might Be Interested In:


Leave a Reply