HTML
<span id="play_info_text" class="pre_play_info_text">We are all console</span>
CSS
body {
background: #345;
}
.pre_play_info_text {
visibility: hidden;
}
.play_info_text {
font-size: 1.5em;
font-family: "Courier";
color: #fff;
text-transform: uppercase;
animation: blur-play-info-text-in .5s ease-in;
text-shadow: 0px 0px 3px #fff,
0px 0px 5px #fff;
}
.play_info_text_out {
font-size: 1.5em;
font-family: "Courier";
color: #fff;
text-transform: uppercase;
opacity: 0;
animation: blur-play-info-text-out .5s ease-in;
text-shadow:
0px 0px 10px #fff,
0px 0px 25px #fff,
0px 0px 50px #fff,
0px 0px 150px #fff,
0px 10px 100px #fff,
0px -10px 100px #fff;
}
@keyframes blur-play-info-text-in {
from {
opacity: 0;
text-shadow:
0px 0px 10px #fff,
0px 0px 25px #fff,
0px 0px 50px #fff,
0px 0px 150px #fff,
0px 10px 100px #fff,
0px -10px 100px #fff;
}
}
@keyframes blur-play-info-text-out {
from {
opacity: 1;
text-shadow:
0px 0px 3px #fff,
0px 0px 5px #fff;
}
}
SCRIPT
var text = '';
function addChar(parent, j) {
return function() {
var character = document.createElement('b');
character.setAttribute('class', 'play_info_text');
character.innerHTML = text.charAt(j);
parent.appendChild(character);
};
}
function fadeChar(parent, j) {
return function() {
var character = parent.children[j];
character.setAttribute('class', 'play_info_text_out');
};
}
function animateInfoTextIn() {
var element = document.getElementById('play_info_text');
element.setAttribute('class', '');
if (element.children.length == 0) {
text = element.innerHTML;
}
var chars = text.length;
element.innerHTML = '';
for (var i = element.children.length; i < chars; ++i) {
setTimeout(addChar(element, i), i*40+100);
}
}
function animateInfoTextOut() {
var element = document.getElementById('play_info_text');
for (var charindex in element.children) {
console.log(charindex.length, charindex.item);
setTimeout(fadeChar(element, charindex), charindex*40+100);
}
}
animateInfoTextIn();
setTimeout(function() { setInterval(animateInfoTextIn, 10000); }, 3000);
setTimeout(function() { setInterval(animateInfoTextOut, 10000); }, 10);
DEmo:
http://codepen.io/highfestiva/pen/lIcqF