<div id="messenger"></div>
<link href="https://fonts.cdnfonts.com/css/necosmic" rel="stylesheet">
<style>
@import url('https://fonts.cdnfonts.com/css/necosmic');
</style>
body {
background: #222;
color: #f0f0f0;
}
#messenger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'necosmic';
font-size: 20px;
white-space: nowrap;
text-shadow: 0 2px 2px rgba(#000, 0.9);
}
View Compiled
var Messenger = function(el){
'use strict';
var m = this;
m.init = function(){
m.codeletters = "&#*+%?£@§$";
m.message = 0;
m.current_length = 0;
m.fadeBuffer = false;
m.messages = [
'This is a message, which can be long and all.',
'This could be another message.',
'Also short ones work!',
'Cool.'
];
setTimeout(m.animateIn, 100);
};
m.generateRandomString = function(length){
var random_text = '';
while(random_text.length < length){
random_text += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
}
return random_text;
};
m.animateIn = function(){
if(m.current_length < m.messages[m.message].length){
m.current_length = m.current_length + 2;
if(m.current_length > m.messages[m.message].length) {
m.current_length = m.messages[m.message].length;
}
var message = m.generateRandomString(m.current_length);
$(el).html(message);
setTimeout(m.animateIn, 20);
} else {
setTimeout(m.animateFadeBuffer, 20);
}
};
m.animateFadeBuffer = function(){
if(m.fadeBuffer === false){
m.fadeBuffer = [];
for(var i = 0; i < m.messages[m.message].length; i++){
m.fadeBuffer.push({c: (Math.floor(Math.random()*12))+1, l: m.messages[m.message].charAt(i)});
}
}
var do_cycles = false;
var message = '';
for(var i = 0; i < m.fadeBuffer.length; i++){
var fader = m.fadeBuffer[i];
if(fader.c > 0){
do_cycles = true;
fader.c--;
message += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
} else {
message += fader.l;
}
}
$(el).html(message);
if(do_cycles === true){
setTimeout(m.animateFadeBuffer, 50);
} else {
setTimeout(m.cycleText, 2000);
}
};
m.cycleText = function(){
m.message = m.message + 1;
if(m.message >= m.messages.length){
m.message = 0;
}
m.current_length = 0;
m.fadeBuffer = false;
$(el).html('');
setTimeout(m.animateIn, 200);
};
m.init();
}
console.clear();
var messenger = new Messenger($('#messenger'));
This Pen doesn't use any external CSS resources.