Interference

index.html

<div class="buzz_wrapper">
  <div class="text">
  <span>TOIMIIKO TÄMÄ</span>
  </div>
  <div class="scanline"></div>
  
</div>

Interference.markdown

Interference

Just a quick test to see if I could make crt style text with blur, colour shifting and jerkiness.

Forked from Chris Rickels's Pen Interference.

Forked from Chris Rickels's Pen Interference.

A Pen by Timo Virtanen on CodePen.

License.

script.js

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

scripts

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

style.css

body{
    background-color:#000;
}
.buzz_wrapper{
  position:relative;
  width:700px;
  margin:20px auto;
  background-color:#000;
  overflow:hidden;
  padding:100px;
}
.scanline{
  width:100%;
  display:block;
  background:#000;
  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:'Impact' !important;
  font-weight:bold;
}
.buzz_wrapper span:nth-child(1){
  color:red;
  margin-left:-2px;
  -webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(2){
  color:green;
  margin-left:2px;
  -webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(3){
  color:blue;
  position:20px 0;
  -webkit-filter: blur(1px);
}
.buzz_wrapper span:nth-child(4){
  color:#fff;
  -webkit-filter: blur(1px);
  text-shadow:0 0 50px rgba(255,255,255,0.4);
}
.buzz_wrapper span:nth-child(5){
  color:rgba(255,255,255,0.4);
  -webkit-filter: blur(15px);
}

.buzz_wrapper span{
  -webkit-animation: blur 30ms infinite, jerk 50ms infinite;
}

@-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.8; }
}
@-webkit-keyframes jerk {
  50% { left:1px; }
  51% { left:0; }
}
@-webkit-keyframes jerkup {
  50% { top:1px; }
  51% { top:0; }
}

.buzz_wrapper span:nth-child(3){
  -webkit-animation: jerkblue 1s infinite;
}
@-webkit-keyframes jerkblue {
  0% { left:0; }
  30% { left:0; }
  31% { left:10px; }
  32% { left:0; }
  98% { left:0; }
  100% { left:10px; }
}
.buzz_wrapper span:nth-child(2){
  -webkit-animation: jerkgreen 1s infinite;
}
@-webkit-keyframes jerkgreen {
  0% { left:0; }
  30% { left:0; }
  31% { left:-10px; }
  32% { left:0; }
  98% { left:0; }
  100% { left:-10px; }
}

.buzz_wrapper .text{
  -webkit-animation: jerkwhole 5s 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(150deg,0);}
  42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,2.2);  -webkit-transform:skew(-180deg,0);}
  43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  65% { }
}