Created
July 18, 2020 18:43
-
-
Save escapeboy/d10d3da633a26c64732effac1cf97e62 to your computer and use it in GitHub Desktop.
Simple animated input typewriter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let speed = 100; | |
let input = document.getElementById('searchInput'); | |
let i = 0; | |
let j = 0; | |
let texts = [ | |
'Macbook Pro', | |
'iPhone 11 Pro', | |
'lorem ipsum im silor daler ipsilom' | |
]; | |
let text = texts[j]; | |
const typeWriter = function(){ | |
return new Promise((resolve, reject) => { | |
let wait = setTimeout(() => { | |
clearTimeout(wait); | |
let content = input.getAttribute('placeholder') + text.charAt(i); | |
input.setAttribute('placeholder', content); | |
i++; | |
}, speed) | |
return resolve(); | |
}); | |
} | |
function init(){ | |
if(j === texts.length) j = 0; | |
text = texts[j]; | |
input.setAttribute('placeholder', ''); | |
i = 0; | |
j++; | |
let writeInterval = setInterval(() => { | |
if(input === document.activeElement){ | |
i = 0; | |
input.setAttribute('placeholder', ''); | |
return; | |
} | |
typeWriter().then(() => { | |
if(i===text.length){ | |
setTimeout(() => { | |
clearInterval(writeInterval); | |
init(); | |
}, 1000) | |
} | |
}); | |
}, speed) | |
} | |
init(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment