Ticker de texto minimalista con CSS3 y Vanilla JavaScript-TickIT
| Autor: | jonchretien |
|---|---|
| Views Total: | 2,531 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 2, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
TickIT es una librería de ticker de JavaScript vainilla que utiliza transiciones CSS3 para rotar a través de una matriz de texto a una cierta velocidad.
Funcionamiento
Coloque el archivo CSS en la sección head del documento.
<link href="tickit.css" rel="stylesheet">
Crea un contenedor para el ticker.
<div id="tickit" class="tickit"> <div class="tickit-inner js-tickit-inner"></div> </div>
Coloque el archivo JavaScript al final del documento.
<script src="tickit.js"></script>
Pase los siguientes configs al visor.
var config = {
data: ['item 1', 'item 2', 'item 3'],
selector: '#tickit',
duration: 1000,
initialPos: -15,
behavior: 'scroll'
}; Inicializar el visor.
var ticker = Tickit(config).init();
Referencias.
- config: Valores de configuración de TickIT.
- config. Data: El texto que se mostrará.
- config. Selector: El identificador del elemento contenedor.
- config. Duration: Duración de la animación.
- config. initialPos: La posición de desfase inicial.
- config. Behavior: El comportamiento de interacción del usuario.
