Sandbox 2 Offset
<html>
<head>
<style>
body {
   font-family: verdana;
   color: #333;
}
 
#container {
  width: 100%;
  margin: 10px auto;
}
 
.write {
  color: #000000;
  font-size: 0.9em;
  font-family: verdana;
  font-weight: normal;
 
  margin: 0;
  line-height: 0;
 
  animation: glitch1 2.5s infinite;
}
 
.write:nth-child(2) {
  color: #67f3da;
  animation: glitch2 2.5s infinite;
}
 
.write:nth-child(3) {
  color: #f16f6f;
  animation: glitch3 2.5s infinite;
}
 
@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
 
@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(-2px, -3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(-5px, -2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(-5px, -1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(-2px, -6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}
 
@keyframes glitch3 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(2px, 3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(5px, 2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(5px, 1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(2px, 6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}
 
.irc {
  font-family: 'Courier New', Courier, monospace;
  border: 2px double;
  background-color: #ffffff;
  margin: 10px 0;
  box-shadow: 3px 5px #d9d9d9;
}
 
.table-1c {
    text-align: left;
    width: 50px;
    vertical-align: top;
}
.table-2c {
    text-align: right;
    width: 150px;
    vertical-align: top;
}
.table-3c {
    text-align: left;
    width: 600px;
}
</style>
</head>
 
<body>
 
<script src="http://photoshop-techniques.wikidot.com/local--files/admin:_sandboxx/jquery-1.10.2.js"></script>
 
<div id="container">
  <h1 class="write">LOCAL_MACHINE\\C:\System\Local\IRC.mfest</h1>
  <h1 class="write">LOCAL_MACHINE\\C:\System\Local\IRC.mfest</h1>
  <h1 class="write">LOCAL_MACHINE\\C:\System\Local\IRC.mfest</h1>
</div>
</body>
 
<div class="irc">
<table class="irc-table">
<tr>
  <tr id="irc-m1">
    <td class="table-1c" id="td1"></td>
    <td class="table-2c">TimeTravel_1:</td>
    <td>Tut mir leid dafür, es ist bloß leichter hier zu sprechen als durchgehend Zeichen in die Database der Foundation zu injizieren.</td>
  </tr>
  <tr id="irc-m2">
    <td class="table-1c" id="td2"></td>
    <td class="table-2c">TimeTravel_1:</td>
    <td>Du bist sicherlich etwas verwirrt. Verständlich.</td>
  </tr>
  <tr id="irc-m3">
    <td class="table-1c" id="td3"></td>
    <td class="table-2c">TimeTravel_1:</td>
    <td>Sei beruhigt, nichts wird passieren. Solange ich eine direkte Verbindung zu deinem Gerät habe, wird die Foundation nichts machen können.</td>
  </tr>
  <tr id="irc-m4">
    <td class="table-1c" id="td4"></td>
    <td class="table-2c">TimeTravel_1:</td>
    <td>Sei beruhigt, nichts wird passieren. Solange ich eine direkte Verbindung zu deinem Gerät habe, wird die Foundation nichts machen können.</td>
  </tr>
</table>
</div>
 
<script>
$("#irc-m1").hide(1);
$("#irc-m2").hide(1);
$("#irc-m3").hide(1);
$("#irc-m4").hide(1);
 
var d = new Date();
 
$("#irc-m1").delay(3000).fadeIn(200);
var date = d.getHours() + ":" + d.getMinutes();
document.getElementById('td' + "1").innerHTML = date;
 
$("#irc-m2").delay(6000).fadeIn(200);
document.getElementById('td2').innerHTML = date;
 
$("#irc-m3").delay(9000).fadeIn(200);
document.getElementById('td3').innerHTML = date;
 
$("#irc-m4").delay(12000).fadeIn(200);
document.getElementById('td4').innerHTML = date;
</script>
</html>