hatBanner
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.
 
 

203 lines
6.9 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 {
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>