A Pen by seth kontny.
<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>
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");
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;
}
/*----------------------*/