public
Created

  • Download Gist
index.html
HTML
1 2 3 4 5 6
<body>
<!-- change the text -->
<div>neon</div>
</body>
script.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
var textHolder = document.getElementsByTagName('div')[0],
text = textHolder.innerHTML,
chars = text.length,
newText = '',
i;
 
for (i = 0; i < chars; i += 1) {
newText += '<i>' + text.charAt(i) + '</i>';
}
 
textHolder.innerHTML = newText;
 
var letters = document.getElementsByTagName('i'),
flickers = [5, 7, 9, 11, 13, 15, 17],
randomLetter,
flickerNumber,
counter;
 
function randomFromInterval(from,to) {
return Math.floor(Math.random()*(to-from+1)+from);
}
 
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
 
function flicker() {
counter += 1;
if (counter === flickerNumber) {
return;
}
 
setTimeout(function () {
if(hasClass(randomLetter, 'off')) {
randomLetter.className = '';
}
else {
randomLetter.className = 'off';
}
 
flicker();
}, 30);
}
 
(function loop() {
var rand = randomFromInterval(500,3000);
 
randomLetter = randomFromInterval(0, 3);
randomLetter = letters[randomLetter];
flickerNumber = randomFromInterval(0, 6);
flickerNumber = flickers[flickerNumber];
 
setTimeout(function() {
counter = 0;
flicker();
loop();
}, rand);
}());

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.