patternjavascriptMinor
Text revelation effect
Viewed 0 times
effectrevelationtext
Problem
I would be glad if someone could take a look at my code and maybe improve it. It's an animation effect to gradually reveal text as if it were being decoded. I wouldn't mind if it could run with jQuery (if it's shorter or better). I uploaded it on jsbin.com. It's all about the effect and not about encryption or decryption.
I've written the following JS Code:
And this short HTML part:
I've written the following JS Code:
var got,
chars,
decrypted = document.getElementById("decoded"),
encrypted = document.getElementById("encoded");
function change() {
var randstring = "",
rslength = chars.length - got.length,
i;
for (var x=0;x got.length) {
setTimeout(change, 10);
} else {
encrypted.textContent = "";
}
}
function startdecrypt() {
chars = decrypted.textContent;
decrypted.textContent = "";
got = "";
setTimeout(change, 10);
}
if (window.addEventListener) {
window.addEventListener('load', startdecrypt, false); //W3C
} else {
window.attachEvent('onload', startdecrypt); //IE
}And this short HTML part:
Enjoy this effect!
Solution
var decrypted = document.getElementById("decoded");
var encrypted = document.getElementById("encoded");
function startdecrypt() {
// Original text, split into an array and reversed (for faster pop())
var originalText = decrypted.textContent.split('').reverse();
var decryptedText = "";
var i = 0;
decrypted.textContent = "";
var shuffleInterval = setInterval(function(){
// Generate random strings. You can modify the generator function range
// (Math.random()*(to-from+1)+from);
var shuffledText = '';
var j = originalText.length;
while(j--) shuffledText += String.fromCharCode((Math.random()*94+33) | 0);
// You can also use this generator to use only the remaining letters
// while(j--) shuffledText += originalText[(Math.random()*j) | 0];
// On every 10 cycles, remove a character from the original text to the decoded text
if(i++ % 10 === 0) decryptedText += originalText.pop();
// Display
decrypted.textContent = decryptedText;
encrypted.textContent = shuffledText;
// Stop when done
if(!shuffledText.length) clearInterval(shuffleInterval);
// 50ms looks more dramatic
},50);
}
if (window.addEventListener) {
window.addEventListener('load', startdecrypt, false); //W3C
} else {
window.attachEvent('onload', startdecrypt); //IE
}Changes
-
Everything in one function
-
Simplified the code
-
Using
setInterval rather than setTimeout. This is more efficient since you don't create timers everytime-
More drama by adding random string generator, instead of just your original set of letters. This adds more mystery to the next letters.
-
In addition to the code, a monospace font would be more dramatic. It avoids the to-fro movement of the decoding text.
Code Snippets
var decrypted = document.getElementById("decoded");
var encrypted = document.getElementById("encoded");
function startdecrypt() {
// Original text, split into an array and reversed (for faster pop())
var originalText = decrypted.textContent.split('').reverse();
var decryptedText = "";
var i = 0;
decrypted.textContent = "";
var shuffleInterval = setInterval(function(){
// Generate random strings. You can modify the generator function range
// (Math.random()*(to-from+1)+from);
var shuffledText = '';
var j = originalText.length;
while(j--) shuffledText += String.fromCharCode((Math.random()*94+33) | 0);
// You can also use this generator to use only the remaining letters
// while(j--) shuffledText += originalText[(Math.random()*j) | 0];
// On every 10 cycles, remove a character from the original text to the decoded text
if(i++ % 10 === 0) decryptedText += originalText.pop();
// Display
decrypted.textContent = decryptedText;
encrypted.textContent = shuffledText;
// Stop when done
if(!shuffledText.length) clearInterval(shuffleInterval);
// 50ms looks more dramatic
},50);
}
if (window.addEventListener) {
window.addEventListener('load', startdecrypt, false); //W3C
} else {
window.attachEvent('onload', startdecrypt); //IE
}Context
StackExchange Code Review Q#37411, answer score: 6
Revisions (0)
No revisions yet.