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