A Pen by seth kontny on CodePen.
Created
April 9, 2014 23:04
-
-
Save sethkontny/10328001 to your computer and use it in GitHub Desktop.
A Pen by seth kontny.
This file contains 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
<section> | |
<div class="buzz_wrapper"> | |
<div class="text"> | |
<span><div id="msg"/></span> | |
</div> | |
<div class="scanline"></div> | |
</div> | |
<div class="buzz_wrapper1"> | |
<div class="text1"> | |
<span1><div id="msg1"/></span1> | |
</div> | |
<div class="scanline1"></div> | |
</div> | |
<br /><br /><br /><br /> | |
<div ="second"> | |
<form method= "post" action='#' onsubmit="return checkforblank()"> | |
<textarea id="fname" rows="1"spellcheck="false" >LOADING TERMINAL</textarea> <br /> | |
<input type="submit" id="but" value="execute" /> | |
</form> | |
<div class="buzz_wrapper2"> | |
<div class="text2"> | |
<span1><div id="msg2"/></span1> | |
</div> | |
<div class="scanline2"></div> | |
</div> | |
</section> | |
<section> | |
</section> |
This file contains 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 showText = function (target, message, index, interval) { | |
if (index < message.length) { | |
$(target).append(message[index++]); | |
setTimeout(function () { showText(target, message, index, interval); }, interval); | |
} | |
} | |
$(function () { | |
showText("#msg", "Terminal", 0, 100); | |
showText("#msg1", "My portfolio, type help", 0, 100); | |
}); | |
$(document).ready(function () { | |
setTimeout("$('#fname').focus();", 500); | |
}); | |
function checkforblank(){ | |
if (document.getElementById('fname').value == "help") { | |
showText("#msg2", "commands:" , 0, 100); | |
//document.getElementById("#ap").style.display = 'block'; | |
return false; | |
} | |
else{ | |
alert('error: "help", dont have space at the end'); | |
return false; | |
} | |
} | |
var textarea = document.querySelector('textarea'); | |
textarea.addEventListener('keydown', autosize); | |
function autosize(){ | |
var el = this; | |
setTimeout(function(){ | |
el.style.cssText = 'height:0; padding:0'; | |
el.style.cssText = 'height:' + el.scrollHeight + 'px'; | |
},0); | |
} | |
$(function() { | |
$('textarea').on('keypress', function(e) { | |
if (e.which == 32) | |
return false; | |
}); | |
}); | |
//setTimeout(function(){ | |
// $("textarea").show(); | |
//},500); // 3 second delay | |
$("textarea").text("LOADING TERMINAL"); | |
setTimeout(myFunction, 3000); | |
$("textarea").text("dwwwwwwwwwwww"); | |
This file contains 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{ | |
background:url("http://www.deleteagency.com/assets/img/pattern.png"); | |
background-color : black; | |
cursor: url("http://i.imgur.com/zkZbB5k.png"), auto; | |
} | |
::-webkit-scrollbar { | |
width: 6px; | |
} | |
::-webkit-scrollbar-track { | |
background-color: black; | |
} | |
::-webkit-scrollbar-thumb { | |
background-color: green; | |
} | |
::selection {color:black;background:green;} | |
::-moz-selection {color:black;background:green;} | |
.buzz_wrapper{ | |
position:relative; | |
width:700px; | |
margin:20px auto; | |
overflow:hidden; | |
padding:100px; | |
} | |
.scanline{ | |
width:100%; | |
display:block; | |
height:4px; | |
position:relative; | |
z-index:3; | |
margin-bottom:5px; | |
opacity:0.1; | |
} | |
.buzz_wrapper span{ | |
position:absolute; | |
-webkit-filter: blur(1px); | |
font-size:80px; | |
font-family:'Courier new', fixed; | |
font-weight:bold; | |
} | |
.buzz_wrapper span:nth-child(1){ | |
color:green; | |
margin-left:-2px; | |
-webkit-filter: blur(2px); | |
} | |
.buzz_wrapper span{ | |
-webkit-animation: blur 30ms infinite, jerk 50ms infinite; | |
} | |
.buzz_wrapper .text{ | |
-webkit-animation: jerkwhole 10s infinite; | |
position:relative; | |
} | |
@-webkit-keyframes jerkwhole { | |
30% { } | |
40% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1); -webkit-transform:skew(0,0);} | |
41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2); -webkit-transform:skew(50deg,0);} | |
42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2); -webkit-transform:skew(-80deg,0);} | |
43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1); -webkit-transform:skew(0,0);} | |
65% { } | |
} | |
/*---------------------------*/ | |
.buzz_wrapper1{ | |
position:relative; | |
width:700px; | |
padding:100px; | |
} | |
.scanline1{ | |
width:100%; | |
display:block; | |
height:4px; | |
position:relative; | |
z-index:3; | |
margin-bottom:5px; | |
opacity:0.1; | |
} | |
.buzz_wrapper1 span1{ | |
position:absolute; | |
-webkit-filter: blur(1px); | |
font-size:40px; | |
font-family:'Courier new', fixed; | |
font-weight:bold; | |
} | |
.buzz_wrapper span1:nth-child(1){ | |
color:green; | |
margin-left:-2px; | |
-webkit-filter: blur(2px); | |
} | |
.buzz_wrapper1 span1{ | |
-webkit-animation: blur 30ms infinite, jerk 50ms infinite; | |
} | |
.buzz_wrapper1 .text1{ | |
-webkit-animation: jerkwhole 10s infinite; | |
position:relative; | |
} | |
textarea{ | |
background-color: transparent; | |
color: green; | |
border: 0px solid green; | |
font-size: 2.5em; | |
margin-top: -15px; | |
text-decoration: none; | |
-webkit-animation: blur 30ms infinite, jerk 50ms infinite; | |
border-left:4px solid green; | |
cursor: url("http://i.imgur.com/sjCxccZ.jpg"), auto; | |
padding: 25px; | |
overflow:hidden; | |
/*display: none;*/ | |
} | |
textarea:focus, input:focus{ | |
outline: 0; | |
} | |
/*----------------------*/ | |
.buzz_wrapper2{ | |
position:relative; | |
width:700px; | |
margin-left: -100px; | |
overflow:hidden; | |
padding:100px; | |
} | |
.scanline2{ | |
width:100%; | |
display:block; | |
height:4px; | |
position:relative; | |
z-index:3; | |
margin-bottom:5px; | |
opacity:0.1; | |
} | |
.buzz_wrapper2 span2{ | |
position:absolute; | |
-webkit-filter: blur(1px); | |
font-size:40px; | |
font-family:'Courier new', fixed; | |
font-weight:bold; | |
} | |
.buzz_wrappe2 span2:nth-child(1){ | |
color:green; | |
margin-left:-2px; | |
-webkit-filter: blur(2px); | |
} | |
.buzz_wrapper2 span2{ | |
-webkit-animation: blur 30ms infinite, jerk 50ms infinite; | |
} | |
@-webkit-keyframes blur { | |
0% { -webkit-filter: 1blur(1px); opacity:0.8;} | |
50% { -webkit-filter: blur(1px); opacity:1; } | |
100%{ -webkit-filter: blur(1px); opacity:0.8; } | |
} | |
@-webkit-keyframes jerk { | |
50% { left:1px; } | |
51% { left:0; } | |
} | |
@-webkit-keyframes jerkup { | |
50% { top:1px; } | |
51% { top:0; } | |
} | |
.buzz_wrapper2 .text2{ | |
-webkit-animation: jerkwhole 5s infinite; | |
position:relative; | |
} | |
#but{ | |
background-color: transparent; | |
color: green; | |
border: 0px solid green; | |
text-decoration: none; | |
-webkit-filter: blur(.9px); | |
font-size: 2em; | |
cursor: url("http://i.imgur.com/q21BHh4.png"), auto; | |
-webkit-animation: blur 80ms infinite, jerk 250ms infinite; | |
-webkit-animation: jerkwhole 10s infinite; | |
} | |
/*----------------------*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment