Skip to content

Instantly share code, notes, and snippets.

@refiito refiito/gist:9782982
Last active Sep 30, 2015

Embed
What would you like to do?
add zombies to toggl
var html = "<style>";
html += ".eye-holder{position:absolute;top:10px;left:10px;right:10px;bottom:10px;z-index:888;}.eyes{color:red;font-size:90px;position:absolute;font-family:Arial;font-weight:700;z-index:-1;-webkit-animation-duration:10s;-webkit-animation-timing-function:ease;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:normal;-moz-animation-duration:10s;-moz-animation-timing-function:ease;-moz-animation-iteration-count:infinite;-moz-animation-direction:normal;-o-animation-duration:10s;-o-animation-timing-function:ease;-o-animation-iteration-count:infinite;-o-animation-direction:normal;-ms-animation-duration:10s;-ms-animation-timing-function:ease;-ms-animation-iteration-count:infinite;-ms-animation-direction:normal;animation-duration:10s;animation-timing-function:ease;animation-iteration-count:infinite;animation-direction:normal}.eye-1{top:10px;left:6%;-webkit-animation-name:eyes_one;-moz-animation-name:eyes_one;-o-animation-name:eyes_one;-ms-animation-name:eyes_one;animation-name:eyes_one}.eye-2{top:40px;right:10%;-webkit-animation-name:eyes_two;-moz-animation-name:eyes_two;-o-animation-name:eyes_two;-ms-animation-name:eyes_two;animation-name:eyes_two}.eye-3{top:-20px;right:40%;-webkit-animation-name:eyes_three;-moz-animation-name:eyes_three;-o-animation-name:eyes_three;-ms-animation-name:eyes_three;animation-name:eyes_three}.eye-4{top:220px;left:10%;-webkit-animation-name:eyes_four;-moz-animation-name:eyes_four;-o-animation-name:eyes_four;-ms-animation-name:eyes_four;animation-name:eyes_four}.eye-5{top:270px;right:4%;-webkit-animation-name:eyes_three;-moz-animation-name:eyes_three;-o-animation-name:eyes_three;-ms-animation-name:eyes_three;animation-name:eyes_three}.eye-6{top:320px;left:1%;-webkit-animation-name:eyes_four;-moz-animation-name:eyes_four;-o-animation-name:eyes_four;-ms-animation-name:eyes_four;animation-name:eyes_four}.eye-7{top:720px;left:5%;-webkit-animation-name:eyes_one;-moz-animation-name:eyes_one;-o-animation-name:eyes_one;-ms-animation-name:eyes_one;animation-name:eyes_one}.eye-8{top:480px;right:6%;-webkit-animation-name:eyes_two;-moz-animation-name:eyes_two;-o-animation-name:eyes_two;-ms-animation-name:eyes_two;animation-name:eyes_two}.eye-9{top:790px;right:8%;-webkit-animation-name:eyes_three;-moz-animation-name:eyes_three;-o-animation-name:eyes_three;-ms-animation-name:eyes_three;animation-name:eyes_three}.eye-10{top:920px;right:25%;-webkit-animation-name:eyes_four;-moz-animation-name:eyes_four;-o-animation-name:eyes_four;-ms-animation-name:eyes_four;animation-name:eyes_four}@-webkit-keyframes eyes_one{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-webkit-keyframes eyes_two{0%{opacity:.5}25%{opacity:0}50%{opacity:.5}75%{opacity:1}100%{opacity:.5}}@-webkit-keyframes eyes_three{0%{opacity:.2}20%{opacity:0}50%{opacity:.3}75%{opacity:.8}100%{opacity:.2}}@-webkit-keyframes eyes_four{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-moz-keyframes eyes_one{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-moz-keyframes eyes_two{0%{opacity:.5}25%{opacity:0}50%{opacity:.5}75%{opacity:1}100%{opacity:.5}}@-moz-keyframes eyes_three{0%{opacity:.2}20%{opacity:0}50%{opacity:.3}75%{opacity:.8}100%{opacity:.2}}@-moz-keyframes eyes_four{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-o-keyframes eyes_one{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-o-keyframes eyes_two{0%{opacity:.5}25%{opacity:0}50%{opacity:.5}75%{opacity:1}100%{opacity:.5}}@-o-keyframes eyes_three{0%{opacity:.2}20%{opacity:0}50%{opacity:.3}75%{opacity:.8}100%{opacity:.2}}@-o-keyframes eyes_four{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-ms-keyframes eyes_one{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-ms-keyframes eyes_two{0%{opacity:.5}25%{opacity:0}50%{opacity:.5}75%{opacity:1}100%{opacity:.5}}@-ms-keyframes eyes_three{0%{opacity:.2}20%{opacity:0}50%{opacity:.3}75%{opacity:.8}100%{opacity:.2}}@-ms-keyframes eyes_four{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes eyes_one{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@keyframes eyes_two{0%{opacity:.5}25%{opacity:0}50%{opacity:.5}75%{opacity:1}100%{opacity:.5}}@keyframes eyes_three{0%{opacity:.2}20%{opacity:0}50%{opacity:.3}75%{opacity:.8}100%{opacity:.2}}@keyframes eyes_four{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.transparent{-ms-filter:'alpha(Opacity=50)';filter:alpha(opacity=50);-moz-opacity:.5;-khtml-opacity:.5;opacity:.5}"
html += "#zombie{background:url(http://zombierun.eu/wp-content/themes/zombierun/css/images/zombiewalk.png);position:fixed;bottom:10px;width:63px;z-index:999999;height:57px;left:100px;-webkit-animation-name:zombiemove,zombiewalk,mirror;-webkit-animation-duration:50s,1s,50s;-webkit-animation-timing-function:linear,steps(2,end),steps(1,end);-webkit-animation-iteration-count:infinite,infinite,infinite;-webkit-animation-direction:normal,normal,normal;-moz-animation-name:zombiemove,zombiewalk,mirror;-moz-animation-duration:50s,1s,50s;-moz-animation-timing-function:linear,steps(2,end),steps(1,end);-moz-animation-iteration-count:infinite,infinite,infinite;-moz-animation-direction:normal,normal,normal;-o-animation-name:zombiemove,zombiewalk,mirror;-o-animation-duration:50s,1s,50s;-o-animation-timing-function:linear,steps(2,end),steps(1,end);-o-animation-iteration-count:infinite,infinite,infinite;-o-animation-direction:normal,normal,normal;-ms-animation-name:zombiemove,zombiewalk,mirror;-ms-animation-duration:50s,1s,50s;-ms-animation-timing-function:linear,steps(2,end),steps(1,end);-ms-animation-iteration-count:infinite,infinite,infinite;-ms-animation-direction:normal,normal,normal;animation-name:zombiemove,zombiewalk,mirror;animation-duration:50s,1s,50s;animation-timing-function:linear,steps(2,end),steps(1,end);animation-iteration-count:infinite,infinite,infinite;animation-direction:normal,normal,normal}@-webkit-keyframes zombiewalk{from{background-position:0 0}to{background-position:-126px 0}}@-webkit-keyframes zombiemove{0%{left:100px}50%{left:800px}100%{left:100px}}@-webkit-keyframes mirror{0%{-webkit-transform:scaleX(1)}50%{-webkit-transform:scaleX(-1)}100%{-webkit-transform:scaleX(1)}}@-moz-keyframes zombiewalk{from{background-position:0 0}to{background-position:-126px 0}}@-moz-keyframes zombiemove{0%{left:100px}50%{left:800px}100%{left:100px}}@-moz-keyframes mirror{0%{-moz-transform:scaleX(1)}50%{-moz-transform:scaleX(-1)}100%{-moz-transform:scaleX(1)}}@-ms-keyframes zombiewalk{from{background-position:0 0}to{background-position:-126px 0}}@-ms-keyframes zombiemove{0%{left:100px}50%{left:800px}100%{left:100px}}@-ms-keyframes mirror{0%{transform:scaleX(1)}50%{filter:FlipH;-ms-filter:'FlipH'}100%{-moz-transform:scaleX(1);-o-transform:scaleX(1);-webkit-transform:scaleX(1);transform:scaleX(1)}}@-o-keyframes zombiewalk{from{background-position:0 0}to{background-position:-126px 0}}@-o-keyframes zombiemove{0%{left:100px}50%{left:800px}100%{left:100px}}@-o-keyframes mirror{0%{-o-transform:scaleX(1)}50%{-o-transform:scaleX(-1)}100%{-o-transform:scaleX(1)}}@keyframes zombiewalk{from{background-position:0 0}to{background-position:-126px 0}}@keyframes zombiemove{0%{left:100px}50%{left:800px}100%{left:100px}}@keyframes mirror{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}";
html += "#zombie-overlay{opacity:.4;background:#000;position:absolute;top:0;bottom:0;left:0;right:0;z-index:777;}";
html += "body{background:#000;}";
html += "</style>";
html += "<div id='zombie'></div>";
html += "<div id='zombie-overlay'></div>";
html += '<div class="eye-holder"><div class="eyes eye-1">. .</div><div class="eyes eye-2">. .</div><div class="eyes eye-3">. .</div><div class="eyes eye-4">. .</div></div>';
function appendHtml(el, str) {
var div = document.createElement('div');
div.innerHTML = str;
while (div.children.length > 0) {
el.appendChild(div.children[0]);
}
}
appendHtml(document.body, html);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.