Scroller liso como el de la carpa con JavaScript puro-Marquee3000
| Autor: | ezekielaquino |
|---|---|
| Views Total: | 2,450 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 27, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Marquee3000 es una pequeña biblioteca de scroller JavaScript de gran rendimiento que aplica un efecto de desplazamiento suave y configurable a cualquier contenido HTML al igual que el obsoleto < a href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee" target = "_ blank" rel = "noopener" > < Marquee > TAG.
Funcionamiento
Instale e importe Marquee3000 en su proyecto.
# NPM $ npm install marquee3000 --save # Bower $ bower install marquee3000
import Marquee3k from 'marquee3000';
O incluya marquee3k. js directamente.
<script src="marquee3k.js"></script>
Añada sus propios elementos en línea (por ejemplo, texto, imágenes, etc.) al desplazador.
<div class="marquee3k"> <h1>Content 1</h1> ... </div>
Config el scroller con los siguientes atributos HTML:
- velocidad de datos: velocidad de desplazamiento
- Data-Reverse: true = de derecha a izquierda
- datos-pausable: true = pausa automática al pasar el ratón
<div class="marquee3k" data-speed="0.25" data-reverse="false" data-pausable="false"> <h1>Content 1</h1> ... </div>
Inicialice el Marquee3000 y listo.
Marquee3k.init()
API methods.
// Refresh scrollers Marquee3k.refreshAll(); // Refresh a specific scroller Marquee3k.refresh(index); // index of marquee
