Efecto de maquina de escribir en Divi

Efecto de maquina de escribir en Divi

En esta entrada veremos como crear el efecto de maquina de escribir en Divi, para lograrlo ocuparemos de código, mismo 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>
Sigue aprendiendo con los cursos de la Zona Premium. Puedes darte de alta por 10€ al més aquí. Incluye acceso a los cursos, descargas de temas, plugins premium y soporte directo conmigo para dudas.

En el siguiente vídeo explicamos todo el proceso.

Prueba 12 clasesde la Zona Premium (gratis)

Directas a tu email 🚀

Muchas gracias por suscribirte. Tendrás noticias mías por correo en breveRevisa, por favor, tu bandeja de spam o correo no deseado si en unos minutos no has recibido mi email.¡Seguimos!​David