0

Estoy intentando implementar la librería Typed.js de Marr Boldt (https://mattboldt.com/demos/typed-js/) en mi web y no consigo entender por qué no me funciona. He cogido el ejemplo más básico de uno de los tutoriales que hay por la red para ver si consigo hacerlo correr(https://www.youtube.com/watch?v=0l2SdoUYB6k), pero tampoco me funciona.

Este es el código del ejemplo:

        <!DOCTYPE html>
        <html>
        <head>
         <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
         <script src="js/typed.js" type="text/javascript"></script>
         <title>Animated typing effect using typed js</title>
        </head>

        <body>
         <div id="wrapper" class="wrapper">
         <div id="typed-strings">
         <p>Typed.js is a <strong>JavaScript</strong> library.</p>
         <p>It can type anything you want</p>
        </div>
         <span id="typed"></span>
        </div>

        <script>
         $('document').ready(function(){
         var typed = new Typed('#typed',{
          stringsElement: '#typed-strings',
          });
         });
        </script>
        </body>
        </html>

La consola del navegador me devuelve esto:

typed.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
typed.html:53 Live reload enabled.
jquery-3.4.1.js:3841 jQuery.Deferred exception: Typed is not defined ReferenceError: Typed is not defined
    at HTMLDocument.<anonymous> (http://127.0.0.1:5500/typed.html:20:21)
    at mightThrow (http://127.0.0.1:5500/js/jquery-3.4.1.js:3557:29)
    at process (http://127.0.0.1:5500/js/jquery-3.4.1.js:3625:12) undefined
jquery-3.4.1.js:3850 Uncaught ReferenceError: Typed is not defined
    at HTMLDocument.<anonymous> (typed.html:20)
    at mightThrow (jquery-3.4.1.js:3557)
    at process (jquery-3.4.1.js:3625)

Aclarar que soy estudiante, así que seguramente esté metiendo la pata en algo.

Si alguien me puede ayudar, se lo agradecería un montón.

Saludos!!

3
  • 2
    Me parece que tienes el fichero typed.js incorrecto... prueba con un enlace a un CDN a ver. Commented el 25 mar. 2020 a las 11:20
  • Mano de santo! Con el CDN me ha funciona perfectamente... el .js debe tener algún error. Mil gracias, tocayo! Commented el 25 mar. 2020 a las 11:38
  • 1
    No es un error. El archivo que tienes descargado usa módulos de ES6, que no es totalmente soportado en los navegadores pero si en NodeJS, en cambio el CDN viene con compatibilidad ES5. Commented el 25 mar. 2020 a las 11:58

1 respuesta 1

0

puedes probar con un string, a mí me funciona solo que no sé como hacerla iniciar cuando yo quiero o que retroceda, te dejo el ejemplo:

const typed = new Typed('#typed', {
    strings: ['primer elemento a escribir', 'segundo elemento a escribir', ...],

 typeSpeed: 58, // Velocidad en mlisegundos para poner una letra,
    
startDelay: 300, // Tiempo de retraso en iniciar la animacion. Aplica tambien cuando termina y vuelve a iniciar,
    
backSpeed: 20, // Velocidad en milisegundos para borrrar una letra,
    
smartBackspace: true, // Eliminar solamente las palabras que sean nuevas en una cadena de texto.
    
shuffle: false, // Alterar el orden en el que escribe las palabras.
    
backDelay: 1500, // Tiempo de espera despues de que termina de escribir una palabra.
    
loop: true, // Repetir el array de strings
    
loopCount: false, // Cantidad de veces a repetir el array.  false = infinite
    
showCursor: true, // Mostrar cursor palpitanto
    
cursorChar: '', // Caracter para el cursor
    
contentType: 'html', // 'html' o 'null' para texto sin formato

});

Espero y te sea útil, y espero encontrar yo como hacerla que inicie con onclick o algun eveto, y retrasarla, etcetera. Saludos.

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.