You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
214 lines
7.6 KiB
214 lines
7.6 KiB
<html>
|
|
<head>
|
|
<meta charset="ISO-8859-1">
|
|
<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>
|