Lo-Fi VHS Text

index.html

<section>
	<div class="glitch">
		<div class="text">
			<span>WE ARE NOT LOOKING FOR FOLLOWERS.<br><br>WE ARE LOOKING FOR COLLABORATORS.</span>
		</div> 
		
	</div>
</section>

lo-fi-vhs-text.markdown

Lo-Fi VHS Text

A Pen by Alec Reimel on CodePen.

License.

script.js

$(function(){
  for(i=0;i<4;i++){
    $('.glitch .text span').eq(0).clone().prependTo('.glitch .text');
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');

$font: 'Ubuntu Mono', monospace;

body{
	margin:0;
	padding:0;
	width:100vw;
	height:100vh;
	//max-width:100vh;
	//max-height:100vh;
	overflow:hidden;
}

section{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	margin:0;
	background:black;
}

.glitch{
	position:relative;
	display:flex;
	justify-content:center;
	align-content:center;
	height:100%;
	width:100%;
	
	
	overflow:hidden;
	
}

.glitch .text{
	-webkit-animation: jerkwhole 2.5s infinite;
  position:relative;
	padding:0;
	margin:0;
	//display:inline;
	
	
	//align-content:center;
	
}

.glitch span{
	position:absolute;
	color: white;
	font-family: $font;
	font-size:4em;
	text-align:center;
	-webkit-filter: blur(1px);
	-webkit-animation: blur 30ms infinite, jerk 50ms infinite;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100vw;
	
}

.glitch span:nth-child(1){
	color:red;
  margin-left:8px;
	margin-top:-2px;
  -webkit-filter: blur(2px);
	
}
.glitch span:nth-child(2){
	color:green;
  margin-left:7px;
  -webkit-filter: blur(2px);
}
.glitch span:nth-child(3){
	color:blue;
  margin-left:-7px;
	margin-top:4px;
  -webkit-filter: blur(2px);
	-webkit-animation: jerkblue .5s infinite;
}
.glitch span:nth-child(4){
	color:white;
  -webkit-filter: blur(1px);
	 text-shadow:0 0 50px rgba(255,255,255,0.4);
}
.glitch span:nth-child(5){
	color:rgba(255,255,255,0.4);
  -webkit-filter: blur(15px);
}



// Animations //

@-webkit-keyframes blur {
  0%   { -webkit-filter: blur(1px); opacity:0.8;}
  50% { -webkit-filter: blur(1px); opacity:1; }
  100%{ -webkit-filter: blur(1px); opacity:0.6; }
}
@-webkit-keyframes jerk {
  50% { left:2px; }
  51% { left:0; }
}
@-webkit-keyframes jerkup {
  50% { top:2px; }
  51% { top:0; }
}

@-webkit-keyframes jerkblue {
  0% { left:0; }
  30% { left:0; }
  31% { left:-10px; }
  32% { left:0; }
  98% { left:0; }
  100% { left:10px; }
}

@-webkit-keyframes jerkgreen {
  0% { left:0; }
  30% { left:0; }
  31% { left:-20px; }
  32% { left:0; }
  98% { left:0; }
  100% { left:15px; }
}

@-webkit-keyframes jerkwhole {
  30% {  }
  40% { opacity:1; top:0; left:0px;  -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(20deg,0);}
  42% { opacity:0.8; top:0px; left:50px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(-40deg,0);}
  43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  65% { }
}