Rotación de texto con Animate. CSS y Pure JavaScript-ReplaceMe. js

Vista prévia

Descripción

ReplaceMe. js es una biblioteca de rotador de texto JavaScript pequeña y libre de dependencia que le permite rotar a través de un conjunto de texto predefinido con animaciones de lujo proporcionadas por Animate. CSS.

Funcionamiento

Cargue el Animate. CSS o cualquier otra biblioteca de animaciones CSS que prefiera en la sección Head de la Página Web.

<link rel="stylesheet" href="/path/to/animate.min.css">

Envolver el primer texto en un elemento alineado con la clase CSS de ' Replace-me ', y luego envolver el otro texto separado con ', ' en un elemento oculto de la siguiente manera:

I Like <strong class="replace-me">JavaScript<span style="display:none;">, CSS3, HTML5, Pythor</span></strong>.

Inicializar el ReplaceMe con la configuración predeterminada.

var myRotator = new ReplaceMe();

Config el RelaceMe usando las siguientes opciones.

var myRotator = new ReplaceMe({


element: document.querySelector('.replace-me'), // DOM element or query selector


 animation: 'animated fadeIn', // String (animation class)


speed: 2000,
// Integer


separator: ',', // String


hoverStop: false, // Boolen


clickChange: false, // Boolen


loopCount: 'infinite', // String or integer


autoRun: true,
// Boolen


onInit: false, // Function


onChange: false, // Function


onComplete: false
// Function
});

API methods.

// start or resume
myRotator.start();

// stop
myRotator.stop();

 // pause
myRotator.pause();

 // switch text
myRotator.change();