|
|
@ -0,0 +1,213 @@ |
|
|
|
<html> |
|
|
|
<head> |
|
|
|
<style> |
|
|
|
/* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */ |
|
|
|
|
|
|
|
|
|
|
|
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:400,700); |
|
|
|
|
|
|
|
* { |
|
|
|
margin:0; |
|
|
|
padding:0; |
|
|
|
list-style:none; |
|
|
|
text-decoration:none; |
|
|
|
box-sizing:border-box; |
|
|
|
font-family: "Courier New", Courier, monospace; |
|
|
|
} |
|
|
|
|
|
|
|
html, body{ |
|
|
|
width:100%; |
|
|
|
height:100%; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
body { |
|
|
|
padding:40px; |
|
|
|
background: black; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.wrapper { |
|
|
|
transform-style: preserve-3d; |
|
|
|
margin: 0 auto; |
|
|
|
width:250px; |
|
|
|
height:400px; |
|
|
|
top: 0;left: 0;right: 0;bottom: 0; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.wrapper:after { |
|
|
|
top: 100%; |
|
|
|
left: 0; |
|
|
|
z-index: -1; |
|
|
|
display: block; |
|
|
|
content: ''; |
|
|
|
height: 22px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bloc { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
filter: blur(1px); |
|
|
|
-webkit-filter: blur(1px); |
|
|
|
transform: translateZ(80px) scale(1); |
|
|
|
-webkit-transform: translateZ(80px) scale(1); |
|
|
|
height: 370px; |
|
|
|
width: 460px; |
|
|
|
margin:auto; |
|
|
|
top: 0px; |
|
|
|
right: 0px; |
|
|
|
bottom: 0px; |
|
|
|
left: 0px; |
|
|
|
padding:20px; |
|
|
|
padding-top:0px; |
|
|
|
color: black; |
|
|
|
z-index: 3; |
|
|
|
} |
|
|
|
pre span { |
|
|
|
transform-style: preserve-3d; |
|
|
|
white-space: pre; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> |
|
|
|
<script> |
|
|
|
|
|
|
|
function rn(min, max){ |
|
|
|
return Math.floor(Math.random() * (max - min + 1) + min) |
|
|
|
} |
|
|
|
var c = [rn(0,255), rn(0,255), rn(0,255)], |
|
|
|
r = rn(0,2), |
|
|
|
direction = rn(0,1), |
|
|
|
letters, |
|
|
|
countLetter, |
|
|
|
thisLetter = 0; |
|
|
|
|
|
|
|
function colorizer(){ |
|
|
|
var time = 1; |
|
|
|
|
|
|
|
now = $(letters[thisLetter]).html() |
|
|
|
if (c[r] > 0 && c[r] < 255){ |
|
|
|
if(direction){ |
|
|
|
c[r]++; |
|
|
|
}else{ |
|
|
|
c[r]--; |
|
|
|
} |
|
|
|
}else{ |
|
|
|
r = rn(0,2), |
|
|
|
direction = !direction; |
|
|
|
c[r] = c[r] >= 255 ? 250 : c[r] |
|
|
|
c[r] = c[r] <= 0 ? 1 : c[r] |
|
|
|
} |
|
|
|
|
|
|
|
$(letters[thisLetter]).html("|") |
|
|
|
if (now != " " && now != "░"){ |
|
|
|
time = 50; |
|
|
|
//now = "█"; |
|
|
|
$(letters[thisLetter]).css({color: "rgb("+c[0]+" ,"+c[1]+" ,"+c[2]+" )"}) |
|
|
|
}else{ |
|
|
|
//now = "░"; |
|
|
|
$(letters[thisLetter]).css({color: "white"}) |
|
|
|
} |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
$(letters[thisLetter]).html(now) |
|
|
|
if (thisLetter == countLetter){ |
|
|
|
thisLetter = 0 |
|
|
|
}else{ |
|
|
|
thisLetter++ |
|
|
|
} |
|
|
|
colorizer() |
|
|
|
}, time); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
$(document).ready(function() { |
|
|
|
!(function ($doc, $win) { |
|
|
|
|
|
|
|
text = " " |
|
|
|
+" " |
|
|
|
+" `/+- -+/` " |
|
|
|
+" dMMMNy:` `:yNMMMd " |
|
|
|
+" /MMMMMMMMmddmMMMMMMMM/ " |
|
|
|
+" `NMMMMMMMMMMMMMMMMMMMMN. " |
|
|
|
+" yMMMMMMMMMMMMMMMMMMMMMMh " |
|
|
|
+" :MMMMMMMMMMMMMMMMMMMMMMMM/ " |
|
|
|
+" yddddddddddddddddddddddddy " |
|
|
|
+" -///::::////::::////:::////: " |
|
|
|
+" .MMMMMMMMMMMMMMMMMMMMMMMMMMMM: " |
|
|
|
+" :++++++dMMMMMMMMMMMMMMMMMMMMMMMMMMMMm++++++: " |
|
|
|
+" .------------------------------------------. " |
|
|
|
+" " |
|
|
|
+" yhys+/:-.`` ``.-:/+syhy " |
|
|
|
+" dMNyhdmNMMMMMMMMMMMMMMNmdhyNMd " |
|
|
|
+" dMMy `/yNMMmyymMMNy/` yMMd " |
|
|
|
+" -dMMdymMMds/. ./sdMMmydMMd- " |
|
|
|
+" ./++/- -/++/. " |
|
|
|
+" " |
|
|
|
|
|
|
|
var line = 1; |
|
|
|
var colums = 48; |
|
|
|
text.split("").map(function(letter, index) { |
|
|
|
if(index != colums){ |
|
|
|
$("pre").append("<span id='span_"+line+"_"+index % colums+"' class='line_"+line+" col_"+index % colums+"'>"+letter+"</span>") |
|
|
|
} |
|
|
|
|
|
|
|
if(index % colums == 0 && index != 0){ |
|
|
|
$("pre").append("<br>") |
|
|
|
line++ |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
letters = $("pre span"); |
|
|
|
countLetter = letters.length |
|
|
|
colorizer() |
|
|
|
|
|
|
|
/* var screenWidth = $win.screen.width / 2, |
|
|
|
screenHeight = $win.screen.height / 2, |
|
|
|
$elems = $doc.getElementsByClassName("elem"), |
|
|
|
validPropertyPrefix = '', |
|
|
|
otherProperty = 'perspective(1000px)', |
|
|
|
elemStyle = $elems[0].style |
|
|
|
|
|
|
|
if(typeof elemStyle.webkitTransform == 'string') { |
|
|
|
validPropertyPrefix = 'webkitTransform'; |
|
|
|
} else if (typeof elemStyle.MozTransform == 'string') { |
|
|
|
validPropertyPrefix = 'MozTransform' |
|
|
|
} |
|
|
|
|
|
|
|
$doc.addEventListener('mousemove', function (e) { |
|
|
|
var centroX = e.clientX - screenWidth, |
|
|
|
centroY = screenHeight - (e.clientY + 13), |
|
|
|
degX = centroX * 0.1, |
|
|
|
degY = centroY * 0.2, |
|
|
|
$elem |
|
|
|
|
|
|
|
for (var i = 0; i < $elems.length; i++) { |
|
|
|
$elem = $elems[i]; |
|
|
|
$elem.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg) rotateX('+ degY +'deg)' |
|
|
|
}; |
|
|
|
});*/ |
|
|
|
})(document, window) |
|
|
|
}); |
|
|
|
</script> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div class="wrapper elem" style="transform: perspective(600px) rotateY(0deg) rotateX(0deg);"> |
|
|
|
<div class="bloc"> |
|
|
|
<div class="content"> |
|
|
|
<pre></pre> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</body> |
|
|
|
</html> |