@ -0,0 +1,202 @@ | |||
<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 { | |||
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 r = rn(0,255), | |||
g = rn(0,255), | |||
b = rn(0,255), | |||
letters, | |||
countLetter, | |||
thisLetter = 0; | |||
function colorizer(){ | |||
var time = 0 ; | |||
$(letters[thisLetter]).css({color: "rgb("+r+","+g+","+b+")"}) | |||
if (r < 256){ | |||
r++; | |||
}else{ | |||
if (g < 256){ | |||
g++; | |||
}else{ | |||
if (b < 256){ | |||
b++; | |||
}else{ | |||
r = rn(0,255), | |||
g = rn(0,255), | |||
b = rn(0,255); | |||
} | |||
} | |||
} | |||
if ($(letters[thisLetter]).html() != " "){ | |||
time = 50; | |||
} | |||
setTimeout(() => { | |||
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; | |||
text.split("").map(function(letter, index) { | |||
$("pre").append("<span id='span_"+line+"_"+index % 44+"' class='line_"+line+" col_"+index % 44+"'>"+letter+"</span>"); | |||
if(index % 44 == 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 content1"> | |||
<pre></pre> | |||
</div> | |||
</div> | |||
</div> | |||
</body> | |||
</html> |
@ -0,0 +1,212 @@ | |||
<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 r = rn(0,255), | |||
g = rn(0,255), | |||
b = rn(0,255), | |||
letters, | |||
countLetter, | |||
thisLetter = 0; | |||
function colorizer(){ | |||
var time = 1; | |||
/* r = rn(0,255), | |||
g = rn(0,255), | |||
b = rn(0,255),*/ | |||
if (r < 256){ | |||
r++; | |||
}else{ | |||
if (g < 256){ | |||
g++; | |||
}else{ | |||
if (b < 256){ | |||
b++; | |||
}else{ | |||
r = rn(0,255), | |||
g = rn(0,255), | |||
b = rn(0,255); | |||
} | |||
} | |||
} | |||
now = $(letters[thisLetter]).html(); | |||
$(letters[thisLetter]).html("|") | |||
$(letters[thisLetter]).css({color: "rgb("+r+","+g+","+b+")"}) | |||
if (now != " "){ | |||
time = 50; | |||
//now = "█"; | |||
} | |||
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; | |||
text.split("").map(function(letter, index) { | |||
$("pre").append("<span id='span_"+line+"_"+index % 44+"' class='line_"+line+" col_"+index % 44+"'>"+letter+"</span>"); | |||
if(index % 44 == 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> |
@ -0,0 +1,218 @@ | |||
<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 r = rn(0,255), | |||
g = rn(0,255), | |||
b = rn(0,255), | |||
letters, | |||
countLetter, | |||
thisLetter = 0; | |||
function colorizer(){ | |||
var time = 1; | |||
/* r = rn(0,255), | |||
g = rn(0,255), | |||
b = rn(0,255),*/ | |||
if (r < 256){ | |||
r++; | |||
}else{ | |||
if (g < 256){ | |||
g++; | |||
}else{ | |||
if (b < 256){ | |||
b++; | |||
}else{ | |||
r = rn(0,255), | |||
g = rn(0,255), | |||
b = rn(0,255); | |||
} | |||
} | |||
} | |||
now = $(letters[thisLetter]).html(); | |||
$(letters[thisLetter]).html("|") | |||
$(letters[thisLetter]).css({color: "rgb("+r+","+g+","+b+")"}) | |||
if (now != " " && now != "░"){ | |||
time = 50; | |||
now = "█"; | |||
}else{ | |||
now = "░"; | |||
} | |||
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; | |||
text.split("").map(function(letter, index) { | |||
if(index != 44){ | |||
$("pre").append("<span id='span_"+line+"_"+index % 44+"' class='line_"+line+" col_"+index % 44+"'>"+letter+"</span>"); | |||
} | |||
if(index % 44 == 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> |