1

Buen dia programadores, estoy tratando de implementar una libreria conocida de animacion de texto que se llama textillate, documentacion: http://textillate.js.org/

Bien, no se si el problema es de includes o estare teniendo algun error de sintaxis pero tampoco es tanta ciencia hacerlo funcionar, la cuestion es que no me anda -.-

acá dejo el código html limpio, y asi como esta tendria que usar la animacion por defecto. Pero no funciona..

Se agradece cualquier ayuda !

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="textillate/assets/jquery.lettering.js"></script>  
    <script src="textillate/jquery.textillate.js"></script>
    <link rel="stylesheet" href="textillate/assets/animate.css">
    <script type="text/javascript">
$(function () {
    $('.demo').textillate();
})
  </script>
<body>
  
<!-- texto animado -->
<div class="demo">
    <p>Gracias stackoverflow :D</p>
</div>

<!-- fin texto animado -->


	

</body>
</html>

6
  • haz probado una versión mas nueva de jquery? Commented el 23 mar. 2018 a las 15:05
  • La verdad no, es la unica que probé. ahora pruebo y te digo !
    – Juampi
    Commented el 23 mar. 2018 a las 15:08
  • mira ejecuta tu codigo aca en esta pagina solo el js y el html nada mas, el resto ya esta listo, el css esta listo.Pagina de prueba Commented el 23 mar. 2018 a las 15:10
  • Si ahí si funciona!, que podra ser?
    – Juampi
    Commented el 23 mar. 2018 a las 15:14
  • lo solucionaste ya? o no te funciona todavía? Commented el 23 mar. 2018 a las 15:27

2 respuestas 2

1

Según los errores que conseguí en tu código

Era la versión de Jquery

Daba un error por consola con $(function() {

Así que incluí los CDN y listo se soluciono, tu código estaba bueno

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
    <script type="text/javascript">
    $(function() {
        	$('.demo').textillate({ in: { effect: 'rollIn' } });
		});
  </script>
  </head>
<body>
  
<!-- texto animado -->
<div class="demo">
    Gracias stackoverflow :D
</div>

8
  • no funciona el ejemplo :( y esto no responde a la pregunta. Commented el 23 mar. 2018 a las 15:24
  • 1
    Lo actualice revisalo Commented el 23 mar. 2018 a las 15:26
  • Tengo en la raiz la carpeta textillate y dentro tengo el jquery.textillate.js Luego dentro de textillate/assets tengo el animate.css y el otro js. las direcciones estan bien ..
    – Juampi
    Commented el 23 mar. 2018 a las 15:27
  • Yo importe los archvios directamente desde un CDN y funciona.. Commented el 23 mar. 2018 a las 15:28
  • No puedo hacerlo ya que necesito que funcione con los archivos.
    – Juampi
    Commented el 23 mar. 2018 a las 15:31
0

Por lo que veo creo que el error puede estar en tus librerías y o el posicionamiento de las librerías jquery , así que hice un ejemplo tomando tu código , me funciona , busque los cdn de las dependencias de cada uno. Puse las librerías js abajo, el css en el head que es como se debería ser.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    
<body>
  
<!-- texto animado -->
<div class="demo">
    <p>Gracias stackoverflow :D</p>
</div>

<!-- fin texto animado -->


	
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script>
<script type="text/javascript">
	$(function () {
	    $('.demo').textillate();
	});
  </script>
  
</body>
</html>

PD:Puse una librería mas actualizada de jquery. Para que funcione de forma local tus librerías descarga denuevo los archivos o ve al link de los cdn y copia el código en archivos js que crearas tú.

3
  • Muy bien muchisimas gracias, admito que fui medio vago y no queria buscar las cdn, con eso funciona de diez. Pero voy a seguir buscando por que no funciona con los archivos.. Muchas gracias !
    – Juampi
    Commented el 23 mar. 2018 a las 15:55
  • Como hago para puntuar? soy nuevo acá
    – Juampi
    Commented el 23 mar. 2018 a las 15:57
  • simplemente presiona la flecha para arriba el la respuesta , aparece en la parte izquierda arriba. Commented el 23 mar. 2018 a las 16:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.