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