Wake up, Neo...reloaded ('-' * 23) Message Scroller "Matrix" style.
(Idea by Jack Rugile) http://codepen.io/jackrugile/pen/xAeHr
Forked from Victor Casals's Pen Wake up, Neo...reloaded.
A Pen by Captain Anonymous on CodePen.
/***************************************** | |
WAKE UP, NEO... | |
Author: Jack Rugile; | |
MODS by Victor Casals - VSDigital | |
* Multiple message | |
* Simulation of human typing | |
* Cursors | |
/*****************************************/ | |
var c = document.createElement('canvas'); | |
var ctx = c.getContext('2d'); | |
var cw = c.width = 400; | |
var ch = c.height = 58; | |
document.body.appendChild(c); | |
ctx.font = 'normal 16px monospace'; | |
ctx.textAlign = 'left'; | |
ctx.textBaseline = 'top'; | |
ctx.fillStyle = '#fff'; | |
ctx.strokeStyle = 'rgba(0, 0, 0, .3)'; | |
ctx.shadowColor = '#3f3'; | |
var page=0; | |
// ... multiple messages... // | |
var messagesArray= new Array( | |
"", | |
"", | |
"", | |
"", | |
"", | |
"", | |
"", | |
"Wake up, Neo...", | |
"The Matrix has you", | |
"Follow the white rabbit.", | |
"Knock, knock, Neo." | |
); | |
// ...cursor style... // | |
var cursor = new Array( | |
"", | |
"█", | |
"", | |
"█", | |
"", | |
"█", | |
"", | |
"█", | |
"_", | |
"", | |
"\n", | |
"█", | |
"*Jack Rugile*", | |
"█" | |
); | |
var messageArray = messagesArray[page].split(''); | |
var totalMessages = messagesArray.length-1; | |
var messageLength = messageArray.length; | |
var pointer = 0; | |
var typeTick = 0; | |
var typeTickMax = 0; | |
var minTick=5; | |
var maxTick=50; | |
var typeResetTick = 0; | |
var typeResetMax = 200; | |
var updateTypeTick = function(){ | |
if(pointer < messageLength){ | |
if(typeTick < typeTickMax){ | |
typeTick++; | |
} else { | |
typeTick = 0; | |
pointer++; | |
typeTickMax= Math.floor((Math.random()*maxTick)+minTick);; | |
} | |
} else { | |
if(typeResetTick < typeResetMax){ | |
typeResetTick++; | |
} else { | |
typeResetTick = 0; | |
typeTick = 0; | |
pointer = 0; | |
// ...change message... // | |
if(page<totalMessages)page++; | |
else page=0; | |
messageArray=messagesArray[page].split(''); | |
messageLength = messageArray.length; | |
} | |
} | |
} | |
var renderMessage = function(){ | |
var text; | |
switch(cursor[page]) | |
{ | |
case "\n": // ... NO ANIMATION | |
text= messageArray.slice(0, messageLength); | |
break; | |
default: | |
text= messageArray.slice(0, pointer); | |
text[pointer]=cursor[page]; | |
break; | |
} | |
ctx.shadowBlur = 9; | |
ctx.fillText(text.join(''), 20, 20); | |
ctx.shadowBlur = 0; | |
} | |
var renderLines = function(){ | |
ctx.beginPath(); | |
for(var i = 0; i < ch/2; i += 1){ | |
ctx.moveTo(0, (i*2) + .5); | |
ctx.lineTo(cw, (i*2) + .5); | |
} | |
ctx.stroke(); | |
} | |
var loop = function(){ | |
ctx.clearRect(0, 0, cw, ch); | |
updateTypeTick(); | |
renderMessage(); | |
renderLines(); | |
setTimeout(loop, 2); | |
} | |
loop(); |
body { | |
background: #000; | |
} | |
canvas { | |
background: #101010; | |
box-shadow: 0 0 0 2px #191919; | |
display: block; | |
left: 50%; | |
margin: -100px 0 0 -200px; | |
position: absolute; | |
top: 50%; | |
} |
Wake up, Neo...reloaded ('-' * 23) Message Scroller "Matrix" style.
(Idea by Jack Rugile) http://codepen.io/jackrugile/pen/xAeHr
Forked from Victor Casals's Pen Wake up, Neo...reloaded.
A Pen by Captain Anonymous on CodePen.