Efecto de maquina de escribir en Divi

En esta entrada veremos como crear el efecto de maquina de escribir en Divi, para lograrlo ocuparemos el código que ponemos a continuación.

Codigo CSS

<style>
@import url('https://fonts.googleapis.com/css?family=Barrio');
 
.hidden {
 opacity:0;
}
.console-container {
 font-family:Barrio;
 font-size:2em;
 text-align:center;
 height:30px;
 width:600px;
 display:inline;
 position:relative;
 color:black;
 top:0;
 bottom:0;
 left:10px;
 right:0;
 margin:auto;
}
.console-underscore {
 display:inline-block;
 position:relative;
 left:10px;
}
 
@media (max-width: 750px) {
 .console-container { font-size:2em; }
}
 
</style>

Codigo HTML

<div class='console-container'>
<span id='text'></span>
 <div class='console-underscore' id='console'>_</div>
 </div>

Código Javascript

<script type="text/javascript"> 
// function([string1, string2],target id,[color1,color2])
 consoleText(['Ejemplo de texto maquina de escribir', 'DavidIbiza', 'Interesante, verdad'], '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 el siguiente vídeo explicamos todo el proceso.