Free javascript Hosting


shuffle-text-animation-code.js

Uploaded on Feb 12 2022 14:51 by jens.thyregod

<script type="text/javascript">
// ——————————————————————————————————————————————————
// TextScramble
// Author: Justin Windle
// https://codepen.io/soulwire/pen/mErPAK
// ——————————————————————————————————————————————————
class TextScramble {
constructor(el) {
this.el = el
this.chars = '!<>-_\\/[]{}—=+*^?#________'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 40)
const end = start + Math.floor(Math.random() * 40)
this.queue.push({ from, to, start, end })
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += `<span class="dud">${char}</span>`
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}
// ——————————————————————————————————————————————————
const personas = [
'Developers',
'Data Scientists',
'Researchers',
'Data Engineers',
'Cats?',
]

let counter = 0;
(function update(){
let element = document.getElementById('autotyper');
let scrambler = new TextScramble(element);
let value = personas[counter % personas.length];

scrambler.setText(value).then(() => {
setTimeout(update, 2500);
});
counter++;
})();
</script>

Back to list