Using the answer to my previous question, I have been able to successfully create an "animated letter incrementer" for any given single string. Now I'd like to make the code more dynamic and have it work on any elements that have a specific class. The value of the "word" to use is set to whatever text falls inside the class.
Question:
How can I loop through each block class, grab the text inside it to use as the word, run the letter increment function and have them all increment on screen like the original question?
HTML:
<span class="block">Hi</span>
<span class="block">Hey there</span>
<span class="block">3 there</span>
JS:
$(document).ready(function() {
$('.block').each(function () {
function Letter(table, letter, duration) {
this.table = table;
this.letter = letter;
this.current = 0;
this.delay = duration / tbl.indexOf(letter); // ms
this.time = Date.now();
this.done = false;
}
Letter.prototype.update = function() {
if (this.done) return;
var time = Date.now();
if (time - this.time >= this.delay) {
this.time = time;
if (this.letter === this.table[this.current] || this.current === this.table.length) {
this.done = true;
} else {
this.current++;
}
}
};
var word = $(this).html();
console.log ('Word: ' + word);
var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var letters = [];
word.toUpperCase().split("").forEach(function(l) {
letters.push(new Letter(tbl, l, 2500))
});
(function loop() {
var txt = "", isDone = true;
letters.forEach(function(l) {
l.update();
if (!l.done) isDone = false;
txt += l.table[l.current];
});
// output txt
$(this).html(txt);
if (!isDone) requestAnimationFrame(loop);
else { /* done */ }
})();
});
});
When I assign $(this).html(txt) at the end, it causes all of the text to disappear.
Original Snippet:
function Letter(table, letter, duration) {
this.table = table;
this.letter = letter;
this.current = 0;
this.delay = duration / tbl.indexOf(letter); // ms
this.time = Date.now();
this.done = false;
}
Letter.prototype.update = function() {
if (this.done) return;
var time = Date.now();
if (time - this.time >= this.delay) {
this.time = time;
if (this.letter === this.table[this.current] ||
this.current === this.table.length) {
this.done = true;
}
else {
this.current++;
}
}
};
var word = "hello there";
var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var letters = [];
word.toUpperCase().split("").forEach(function(l) {
letters.push(new Letter(tbl, l, 2500))
});
(function loop() {
var txt = "", isDone = true;
letters.forEach(function(l) {
l.update();
if (!l.done) isDone = false;
txt += l.table[l.current];
});
// output txt
d.innerHTML = txt;
if (!isDone) requestAnimationFrame(loop);
else { /* done */ }
})();<!DOCTYPE html>
<html>
<head>
<style>
#d {font:bold 32px monospace}
</style>
<script src="/scripts/snippet-javascript-console.min.js"></script>
</head>
<body>
<div id=d></div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire