Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created January 8, 2018 01:16
Show Gist options
  • Save CodeMyUI/9e60eaddc810c3aac9558af52859459b to your computer and use it in GitHub Desktop.
Save CodeMyUI/9e60eaddc810c3aac9558af52859459b to your computer and use it in GitHub Desktop.
Messenger
<div id="messenger"></div>
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'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
body {
background: #222;
color: #f0f0f0;
}
#messenger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: monospace;
font-size: 20px;
white-space: nowrap;
text-shadow: 0 2px 2px rgba(#000, 0.9);
}
@yuturiy
Copy link

yuturiy commented Jan 21, 2018

@olishiz
Copy link

olishiz commented Mar 1, 2018

How do I use this github index.html?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment