I need a function, or some plugin that simulates typing, that is to say that it has a cursor, and that it is typing and deleting words;
One site I found by example was este.
(The typing effect on the banner).
But I could not find in Github and nowhere a function for this: '(
Has anyone used this or do you know of a function that does something similar?
The name of this effect is Typewriter Effect
Here's a complete collection, some using CSS only others with CSS and JS as well.
link (study the examples)
Template Only with CSS:
body{
background: #000;
padding-top: 10px;
}
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(60, end);
}
p:nth-child(2){
animation: type2 8s steps(60, end);
}
p a{
color: lime;
text-decoration: none;
}
span{
animation: blink 1s infinite;
}
@keyframes type{
from { width: 0; }
}
@keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}
@keyframes blink{
to{opacity: .0;}
}
::selection{
background: black;
}<p>hi folks, this is typing animation using CSS</p>
<p>created with ♥
<a href="#">texto</a> :)
<span>|</span></p>Source: link
Template with JS: (read the author's comments)
document.addEventListener('DOMContentLoaded',function(event){
// array with texts to type in typewriter
var dataText = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"];
// type one text in the typwriter
// keeps calling itself until the text is finished
function typeWriter(text, i, fnCallback) {
// chekc if text isn't finished yet
if (i < (text.length)) {
// add next character to h1
document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';
// wait for a while and call this function again for next character
setTimeout(function() {
typeWriter(text, i + 1, fnCallback)
}, 100);
}
// text finished, call callback if there is a callback function
else if (typeof fnCallback == 'function') {
// call callback after timeout
setTimeout(fnCallback, 700);
}
}
// start a typewriter animation for a text in the dataText array
function StartTextAnimation(i) {
if (typeof dataText[i] == 'undefined'){
setTimeout(function() {
StartTextAnimation(0);
}, 20000);
}
// check if dataText[i] exists
if (i < dataText[i].length) {
// text exists! start typewriter animation
typeWriter(dataText[i], 0, function(){
// after callback (and whole text has been animated), start next text
StartTextAnimation(i + 1);
});
}
}
// start the text animation
StartTextAnimation(0);
});body {
background-color: #FF5A5A;
height: 100%;
font-family: 'tradegothiclt-bold', sans-serif;
}
h1 {
font-size: 2em;
color: white;
text-transform: uppercase;
}
span {
border-right: .05em solid;
animation: caret 1s steps(1) infinite;
}
@keyframes caret {
50% {
border-color: transparent;
}
} <h1>Hallo, Wij zijn Occhio!</h1>Source: link
<div id="div"></div>
var div = document.getElementById('div');
var texto = 'FELIZ NATAL!';
var escrevendo = true;
function escrever(str, el) {
var char = str.split('').reverse();
var typer = setInterval(function() {
if (escrevendo) {
if (!char.length) {
return clearInterval(typer);
}
var next = char.pop();
el.innerHTML += next;
if (el.innerHTML.length == str.length) {
escrevendo = false;
}
} else {
str = str.substring(0, str.length - 1);;
el.innerHTML = str;
}
}, 100);
}
escrever(texto, div);