Efecto de texto máquina de escribir en Divi

por | 13 Dic, 2017 | css, Divi, JavaScript

Efecto máquina de escribir en Divi: La idea

ordenador-amigaHace 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.

<div class='console-container'><!-- [et_pb_line_break_holder] --><span id='text'></span><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><div class='console-underscore' id='console'>_</div><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --></div>
<script type="text/javascript"><!-- [et_pb_line_break_holder] -->// function([string1, string2],target id,[color1,color2])<!-- [et_pb_line_break_holder] --> consoleText(['Un efecto calentito para tí', 'Tutoriales en Aulamedia', '¿A que mola mucho?'], 'text',['#BD6983','orangered','#4aaecf']);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->function consoleText(words, id, colors) {<!-- [et_pb_line_break_holder] --> if (colors === undefined) colors = ['#fff'];<!-- [et_pb_line_break_holder] --> var visible = true;<!-- [et_pb_line_break_holder] --> var con = document.getElementById('console');<!-- [et_pb_line_break_holder] --> var letterCount = 1;<!-- [et_pb_line_break_holder] --> var x = 1;<!-- [et_pb_line_break_holder] --> var waiting = false;<!-- [et_pb_line_break_holder] --> var target = document.getElementById(id)<!-- [et_pb_line_break_holder] --> target.setAttribute('style', 'color:' + colors[0])<!-- [et_pb_line_break_holder] --> window.setInterval(function() {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> if (letterCount === 0 && waiting === false) {<!-- [et_pb_line_break_holder] --> waiting = true;<!-- [et_pb_line_break_holder] --> target.innerHTML = words[0].substring(0, letterCount)<!-- [et_pb_line_break_holder] --> window.setTimeout(function() {<!-- [et_pb_line_break_holder] --> var usedColor = colors.shift();<!-- [et_pb_line_break_holder] --> colors.push(usedColor);<!-- [et_pb_line_break_holder] --> var usedWord = words.shift();<!-- [et_pb_line_break_holder] --> words.push(usedWord);<!-- [et_pb_line_break_holder] --> x = 1;<!-- [et_pb_line_break_holder] --> target.setAttribute('style', 'color:' + colors[0])<!-- [et_pb_line_break_holder] --> letterCount += x;<!-- [et_pb_line_break_holder] --> waiting = false;<!-- [et_pb_line_break_holder] --> }, 1000)<!-- [et_pb_line_break_holder] --> } else if (letterCount === words[0].length + 1 && waiting === false) {<!-- [et_pb_line_break_holder] --> waiting = true;<!-- [et_pb_line_break_holder] --> window.setTimeout(function() {<!-- [et_pb_line_break_holder] --> x = -1;<!-- [et_pb_line_break_holder] --> letterCount += x;<!-- [et_pb_line_break_holder] --> waiting = false;<!-- [et_pb_line_break_holder] --> }, 1000)<!-- [et_pb_line_break_holder] --> } else if (waiting === false) {<!-- [et_pb_line_break_holder] --> target.innerHTML = words[0].substring(0, letterCount)<!-- [et_pb_line_break_holder] --> letterCount += x;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }, 120)<!-- [et_pb_line_break_holder] --> window.setInterval(function() {<!-- [et_pb_line_break_holder] --> if (visible === true) {<!-- [et_pb_line_break_holder] --> con.className = 'console-underscore hidden'<!-- [et_pb_line_break_holder] --> visible = false;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> con.className = 'console-underscore'<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> visible = true;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }, 400)<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></script>
<style><!-- [et_pb_line_break_holder] -->@import url('https://fonts.googleapis.com/css?family=Barrio');<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->.hidden {<!-- [et_pb_line_break_holder] --> opacity:0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.console-container {<!-- [et_pb_line_break_holder] --> font-family:Barrio;<!-- [et_pb_line_break_holder] --> font-size:2em;<!-- [et_pb_line_break_holder] --> text-align:center;<!-- [et_pb_line_break_holder] --> height:30px;<!-- [et_pb_line_break_holder] --> width:600px;<!-- [et_pb_line_break_holder] --> display:inline;<!-- [et_pb_line_break_holder] --> position:relative;<!-- [et_pb_line_break_holder] --> color:black;<!-- [et_pb_line_break_holder] --> top:0;<!-- [et_pb_line_break_holder] --> bottom:0;<!-- [et_pb_line_break_holder] --> left:10px;<!-- [et_pb_line_break_holder] --> right:0;<!-- [et_pb_line_break_holder] --> margin:auto;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.console-underscore {<!-- [et_pb_line_break_holder] --> display:inline-block;<!-- [et_pb_line_break_holder] --> position:relative;<!-- [et_pb_line_break_holder] --> left:10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->@media (max-width: 750px) {<!-- [et_pb_line_break_holder] --> .console-container { font-size:2em; }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --></style>

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.

usar-constructor-divi

En la sección, pulsamos en insertar columnas y elegimos una columna.

insertar-1-columna

Y ahora insertamos nuestro primer módulo de tipo código.

ajustes-modulo-codigo

Ajustes módulo 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.

estructura-layout-tutorial-maquina-escribir

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.


icono-html

Pulsa para abrir el 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.

icono-css

Pulsa para ver el 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.