A Pen by Captain Anonymous on CodePen.
Created
April 20, 2015 12:26
-
-
Save Sven65/1b3f687728b7eca0ee71 to your computer and use it in GitHub Desktop.
eNOPmN
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <h1 class="title cursor noselect">You should not be here.</h1> | |
| <div id="js-content"></p></div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var text = ""; | |
| var curInterval; | |
| var textToWrite = ""; | |
| $(document).ready(function() { | |
| var $content = $("#js-content"); | |
| var type = function(speed) { | |
| speed = typeof speed !== 'undefined' ? speed : 50; | |
| var tmpfunc = function (){ | |
| var tmp = textToWrite.slice(0, 1); | |
| if (tmp == "<") { | |
| var tag = textToWrite.match(/<(.*?)>/)[0]; | |
| textToWrite = textToWrite.replace(tag,""); | |
| text += tag; | |
| $content.html(text.replace(/\n/g, "<br />")); | |
| } else if (tmp != '') { | |
| textToWrite = textToWrite.slice(1); | |
| text += tmp; | |
| // Redraw | |
| $content.html(text.replace(/\n/g, "<br />")); | |
| } else { | |
| clearInterval(curInterval); | |
| } | |
| }; | |
| curInterval = setInterval(tmpfunc, speed); | |
| }; | |
| type(50) | |
| $(window).keydown(function(e){ | |
| clearInterval(curInterval); | |
| text += textToWrite; | |
| textToWrite = ""; | |
| $content.html(text.replace(/\n/g, "<br />")); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| .noselect, b, br { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| cursor:default; | |
| } | |
| body { | |
| background-color: #000; | |
| padding: .05em .5em; | |
| margin-right: 20px; | |
| color: lime; | |
| font-family: 'Courier'; | |
| position: absolute; | |
| z-index: 999999; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| -webkit-font-smoothing: none; | |
| line-height: 1.2; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| ::-moz-selection { | |
| background: white; | |
| } | |
| ::selection { | |
| background: rgba(100,100,100,0.6); | |
| } | |
| @-webkit-keyframes cursor { | |
| 0%{ | |
| opacity:1; | |
| } | |
| 49.9% { | |
| opacity:1; | |
| } | |
| 50% { | |
| opacity:0; | |
| } | |
| 99.9% { | |
| opacity:0; | |
| } | |
| 100% { | |
| opacity:1; | |
| } | |
| } | |
| .cursor:after { | |
| content:'_'; | |
| -webkit-animation: cursor 2s infinite; | |
| } | |
| h1 { | |
| font-size: 48px; | |
| } | |
| h2 { | |
| font-size: 32px; | |
| } | |
| h3 { | |
| font-size: 24px; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| font-size: 24px; | |
| } | |
| .content { | |
| padding: 40px; | |
| } | |
| .yellow { | |
| color:#F5A12D; | |
| text-shadow: rgba(150,128,0,.2) .5em 0; | |
| } | |
| .purple { | |
| color:#73677B; | |
| text-shadow: rgba(50,60,70,.2) .5em 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment