50projectsIn50days – Day 30: Auto Text Effect
In the HTML, there are simple tags that show an h1 element and an input for adjusting the text speed. The text will appear based on the function defined in the script.
The function is called writeText() and it adds the text from textContent to the textElement.
const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur consequuntur eos placeat sequi enim ab nobis voluptas sint excepturi eius.'
let idx = 1
let speed = 300 / speedEl.value
writeText()
function writeText(){
textEl.innerText = text.slice(0, idx)
idx++
if(idx > text.length){
idx = 1
}
setTimeout(writeText, speed)
}
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)
You can see the code in this GitHub Repository: 30.auto_text_effect and the demo of the project is here: Auto Text Effect