Efecto de texto máquina de escribir en Divi
Efecto máquina de escribir en Divi: La idea
Hace unos días me llamó la atención un efecto típico que ya había visto en otras ocasiones. Crear un Efecto máquina de escribir en Divi. Se trataba de una simulación de texto que va apareciendo como si estuviéramos escribiendo en un ordenador antiguo.
Simula más bién cómo se escribía en los prehistóricos commodore, Amiga o spectrum. En general, los ordenadores en los que se escribieron originalmente las cartas de los apóstoles (ji,ji). ¿Alguno los recuerda?
Pero bueno, pensé que ibas a relacionar más rápidamente el efecto si lo asociaba a la tradicional máquina de escribir. Y de ahí el título.
Dónde encontrar el original
El caso es que el origen de esta práctica está en la página Terminal Text Effect de la web de codepen.io. Puedes echarle un vistazo si quieres.
Sin embargo, este mismo efecto está adaptado en otra web de tutoriales, en inglés: Divinotes. Aquí ya está depurado y adaptado el efecto a Divi.
Además de que me pareció interesante adaptar el efecto, terminé de decidirme por la sencillez a la hora de crearlo. Bastarán tres módulos tipo código para generar la práctica. Sin necesidad de añadir código en ninguna otra parte. Soy bastante torpe con JavaScript, así que me gustó que fuese tan fácil adaptar este efecto a mis necesidades.
El Ejemplo
Justo bajo estas líneas puedes ver el tutorial terminado.
La estructura
Sólo vamos a necesitar tres módulos tipo código. Así que creamos nueva entrada o página y activamos usar el constructor de Divi.
En la sección, pulsamos en insertar columnas y elegimos una columna.
Y ahora insertamos nuestro primer módulo de tipo código.
Luego añadiremos nuestros scripts (código) en la zona contenido (en verde) de cada módulo código. De momento duplica el módulo que has creado dos veces y etiquétalos como código HTML, código JavaScript y código CSS. Puedes hacer esto abriendo la configuración de cada módulo y en la pestaña contenido, abajo del todo, en el campo Etiqueta de administración. Esto es sólo por organización, no afectará en nada nuestra práctica si no queremos hacerlo.
A estas alturas, tu sección debe parecerse a la imagen inferior.
El primer módulo: código HTML
Abre la configuración del primer módulo, y en la pestaña contenido, en la zona contenido (arriba, en le imagen Ajustes módulo código en verde) pega este código.
En este módulo, poco podemos personalizar. Tal vez el carácter parpadeante. A lo mejor prefieres el carácter [|] en lugar del guión bajo [_]. A parte de esto, poco más.
El Segundo módulo: código JavaScript
Abre la configuración del segundo módulo que hemos creado antes, y en la pestaña contenido, en la zona contenido, pega el siguiente código.
<script type="text/javascript"> // function([string1, string2],target id,[color1,color2]) consoleText(['Un efecto calentito para tí', 'Tutoriales en Aulamedia', '¿A que mola mucho?'], 'text',['#BD6983','orangered','#4aaecf']); function consoleText(words, id, colors) { if (colors === undefined) colors = ['#fff']; var visible = true; var con = document.getElementById('console'); var letterCount = 1; var x = 1; var waiting = false; var target = document.getElementById(id) target.setAttribute('style', 'color:' + colors[0]) window.setInterval(function() { if (letterCount === 0 && waiting === false) { waiting = true; target.innerHTML = words[0].substring(0, letterCount) window.setTimeout(function() { var usedColor = colors.shift(); colors.push(usedColor); var usedWord = words.shift(); words.push(usedWord); x = 1; target.setAttribute('style', 'color:' + colors[0]) letterCount += x; waiting = false; }, 1000) } else if (letterCount === words[0].length + 1 && waiting === false) { waiting = true; window.setTimeout(function() { x = -1; letterCount += x; waiting = false; }, 1000) } else if (waiting === false) { target.innerHTML = words[0].substring(0, letterCount) letterCount += x; } }, 120) window.setInterval(function() { if (visible === true) { con.className = 'console-underscore hidden' visible = false; } else { con.className = 'console-underscore' visible = true; } }, 400) } </script>
En este módulo es donde está el potencial de nuestra práctica . Puedes cambiar los parámetros de la tercera línea para poner tus textos y cambiar los colores. También puedes cambiar velocidad, etc.
Y ya sólo no queda un módulo por programar. Vamos a por él.
El Tercer Módulo: código CSS
Abre la configuración del tercer módulo, y al igual que hemos hecho en los otros módulos, en la pestaña contenido, en la zona contenido, pega el siguiente código.
En este módulo podemos dar estilo a nuestro efecto. Puedes cambiar la fuente que yo he usado importando otra. Hemos importado la fuente de googleFonts
No te cortes, prueba y prueba. Una fuente apropiada puede ser el salto de calidad que necesita tu efecto.
Cambia tamaño,alineación, tamaño de fuente. En fin personaliza a tu gusto. Espero que te haya sido útil.
Aquí tienes el tutorial en vídeo
Y como siempre, si te ha gustado, comparte. Gracias por tu tiempo.
En primer lugar, muchas gracias por el tutorial Pedro! es genial.
Pero tengo una duda, si deseo que ese efecto se vea también correctamente cuando pasa a dispositivo móvil qué debo hacer?
Ahora mismo es como si no hubiera ningún módulo.
Gracias por tu comentario, Oriol
Lo acabo de probar en tablet y en móvil y funciona correctamente. No he hecho nada especial
Saludos
Muchas gracias por el tutorial, pero me sucede los mismo, en el móvil el texto sale muy grande y se descuadra la web, te agradecería puedas ayudarme, esta es mi pagina. http://www.cynetiquetas.com
Hola buen día, me encantó este post y muchos mas de los que has publicado, me han servido de gran ayuda.
Quería consultarte si el efecto se puede realizar como un texto escrito en una PC en vez de en una maquina de escribir y en el modulo carrousel de DIVI?
El ejemplo seria algo así:
https://nuevo.kriarthemes.net
Saludos,
Matias
Hola, Matías
Seguro que sí se puede. No he probado en modulos distintos a texto, pero existen plugins que permiten hacer este efecto en cualquier modulo. Aquí tienes uno específico para Divi
https://elegantmarketplace.com/downloads/typewriter-for-divi/ Probablemente que el ejemplo al que te refieres está realizado con un pluging.
Saludos
Hola Aula media,
Genial todo muy sencillo y claro.
Lo que no encuentro en el código es para aumentar el tamaño de las letras.
¿Que parte del código es?
Gracias
Hola, Juan José
Gracias por tu comentario.
Lo tienes en el código CSS, donde pone font-size:2m;
Cambialo si quieres a pixeles, por ejemplo font-size:50px;
Ya me dices
saludos
Hola, primero agradecer por el post, muy bien explicado y sencillo en verdad muchas gracias, quería consultar como podría hacer para cambiar la fuente de los textos
Hola, Diego. Gracias por tu comentario
Para cambiar la fuente, entra en https://fonts.google.com/
Selecciona la fuente que quieras pulsando en el circulo rojo con el signo + que hay arriba a la derecha de la fuente. Te aparecerá la familia en la esquina inferior derecha. Pulsa en family selected y ahí tienes el código para sustituir en el css. Cópialo y pégalo sustituyendo lo que hay en la parte superior del css del tutorial.
Ya me dices 😉
Pude realizar el cambio con éxito gracias
Buens, como puedo parar la animacion una vez terminado la ultima frase? es decir, quiero que se quede la ultima frase fija. Gracias
Hola Pedro
Gracias por el post. Tengo una consulta al respecto, el texto que introduces (el que se ve posteriormente en la web) puede tener formato de H1, H2,…?
Gracias
Gracias por el tutorial, pero no consigo centrar el texto, alguna idea?
Gracias, Carlo. En el módulo código donde has puesto el html (el primero), selecciona los ajustes > pestaña diseño, y en orientación de texto, selecciona centrado.
Espero que te sirva. Ya me cuentas
Saludos