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 dentro de mi Academia de WordPress y Marketing. Puedes darte de alta por 15€ 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.