fbpx
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 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>
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 clases gratis

 

1. Cómo contratar un hosting, instalar WordPress y acceder a tu web

2. Cómo buscar y elegir un theme para tu web

3. Cómo crear menús personalizados

4 Cómo personalizar páginas en WordPress con Gutenberg

5. Cómo instalar Divi y cargar diseño web en un par de clics. 

6. Qué es el email marketing y porqué debes usarlo

7. Cómo funciona el editor visual de MailerLite para crear tus campañas de email marketing

8. Cómo crear una tienda online profesional con Flatsome

9. Cómo crear una página web para inmobiliarias

10. Estrategias linkbuilding para mejorar el SEO

11. Cómo crear metadescripciones para atraer más clics a nuestra web.

12. Cómo conseguir suscriptores y contactos

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