Simple Text Rotator Plugin jQuery
Actualmente en el desarrollo web se tiende a usar diseños minimalistas. Esto conlleva hacer las páginas web más sencillas, cuidando los detalles, por lo que deberemos evitar las parrafadas de texto. Una forma muy fácil de lograr un efecto sencillo pero con buen acabado es, cómo no, usando jQuery. En este artículo aprenderás una manera sencilla de rotar palabras o pequeñas frases, puedes ver la demo para hacerte una idea de lo que puedes lograr con Simple Text Rotator Plugin jQuery.
Qué necesitamos
- Biblioteca jQuery
- Simple Text Rotator Plugin jQuery disponible en GitHub
Preparando el terreno
El primer paso es colocar en nuestra carpeta de scripts js el fichero jquery-simple-text-rotator.js junto con un archivo que vamos a crear nosotros que va a contener nuestras funciones personalizadas, nosotros lo llamamos main.js.
En la cabecera del documento html llamamos todos los ficheros necesarios de javascript y css.
<!-- CSS de text rotator -->
<link href="css/simpletextrotator.css" rel="stylesheet" type="text/css" />
<!-- Bibliotecas javascript y jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.simple-text-rotator.js"></script>
<script type="text/javascript" src="js/main.js"></script>
El HTML
Deberemos seguir una estructura de <div><p>texto <span class=»rotate»>texto1, texto2, texto3</span> más texto…</p></div>.
Es imprescindible separar con comas simples cada una de las palabras que queremos rotar.
En vez de párrafos, podemos usar cabeceras <h1>, <h2>, etc. En nuestro código verás las clases «demo1», «demo2», «demo3 y «demo4» que hemos usado para mostrarte los diferentes efectos, pero esto es totalmente personalizable.
<div>
<p>Texto <span class="rotate">aquí aplicamos el efecto, aquí otra frase, otra diferente separada por comas simples</span> más texto.</p>
</div>
Empieza la acción
En nuestro fichero javascript (que nosotros hemos llamado «main.js») haremos la llamada al plugin Simple Text Rotator con las opciones que queramos.
jQuery(".rotate").textrotator({
animation: "flip",
speed: 2000
});
Configuración personalizada
Este plugin sólo nos permite personalizar dos parámetros, que son el efecto de rotación y el tiempo que pasa entre cada cambio.
- animation: flip / spin / flipUp / flipCube. Puedes ver cada una de las animaciones en nuestra demo.
- speed: tiempo que debe esperar el texto entre rotaciones, expresado en milisegundos.
Mira la demo que hemos desarrollado en Endeos, el efecto de este plugin no te dejará indiferente. También puedes descargarla y personalizarlo a tu gusto en tu sitio web.
Ver demo Descargar ejemplo
