Chrome Download Link
Video Explanation
//javascript
var j;
function main() {
// setup jQuery on j to avoid any possible conflicts
j = jQuery.noConflict();
// outlines all existing <a> tags in red
// running .each() on a jQuery search executes the included function
// individually for each element it finds that matches the search
// (e.g. in this case, it runs the function redBorder() for each 'a'
// tag). the parameter name 'e' refers to the found element
//
// j('a').each(function() { redBorder(this); });
setInterval(function() {
var x = getRandomInt(12)+9;
var newsize = x+"px";
j('*').animate( {
"font-size":newsize
},400);
}, 200);
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
//css
}
body, span, p, a, div,::before, body, span, p, a, div::after{
content: 'WATCHING';
position:absolute;
top: 0;
left: 0;
right: 0;
overflow: scroll;
color: black;
}
img{
position:relative;
top: 0;
left: 0;
right: 0;
}
img::before, img::after{
animation: effect 3s infinite linear;
}
body, span, p, a, div::before{
right: 45px;
text-shadow: 5px 0 #00ffea;
animation: effect 1s infinite linear;
}
body, span, p, a, div::after{
left: 4px;
text-shadow: -2px 0 #fe3a7f;
animation: effect 2s infinite linear
}
*{
position: relative;
top: 40%;
margin: 0 auto;
color: black;
}
*::before, *::after{
content: 'TRACKING';
position:absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
color: black;
}
*::before{
right: 45px;
text-shadow: 5px 0 #00ffea;
animation: effect 2s infinite linear;
}
*::after{
left: 4px;
text-shadow: -2px 0 #fe3a7f;
animation: effect 3s infinite linear
}
@-webkit-keyframes effect {
0% {
clip: rect(55px,9999px,56px,0);
}
5% {
clip: rect(47px,9999px,30px,0);
}
10% {
clip: rect(33px,9999px,36px,0);
}
15% {
clip: rect(35px,9999px,9px,0);
}
20% {
clip: rect(63px,9999px,59px,0);
}
25% {
clip: rect(96px,9999px,98px,0);
}
30% {
clip: rect(48px,9999px,78px,0);
}
35% {
clip: rect(50px,9999px,34px,0);
}
40% {
clip: rect(60px,9999px,72px,0);
}
45% {
clip: rect(60px,9999px,72px,0);
}
50% {
clip: rect(2px,9999px,60px,0);
}
55% {
clip: rect(23px,9999px,89px,0);
}
60% {
clip: rect(76px,9999px,91px,0);
}
65% {
clip: rect(62px,9999px,30px,0);
}
70% {
clip: rect(60px,9999px,75px,0);
}
75% {
clip: rect(60px,9999px,87px,0);
}
80% {
clip: rect(2px,9999px,14px,0);
}
85% {
clip: rect(28px,9999px,87px,0);
}
90% {
clip: rect(73px,9999px,50px,0);
}
95% {
clip: rect(79px,9999px,70px,0);
}
100% {
clip: rect(17px,9999px,79px,0);
}
}