Skip to content

Instantly share code, notes, and snippets.

@adammw
Last active September 25, 2015 23:58
Show Gist options
  • Save adammw/1006144 to your computer and use it in GitHub Desktop.
Save adammw/1006144 to your computer and use it in GitHub Desktop.
Facebook Nyan Cat... Inject with `javascript:s=document.createElement('script');s.src='https://bit.ly/110kHu0';document.body.appendChild(s);`
/* Facebook Nyan Cat
* Works only in Webkit browsers
* Uses images + sound from http://nyan.cat
*/
var NyanCat = (function NyanCatFacebook() {
const updateInterval = 10;
var nyan, rainbows, sound;
var loadingPosts = false;
var top = 0;
var interval = null;
function startScroll() {
interval = setInterval(scrollScreen, updateInterval);
};
function stopScroll() {
clearInterval(interval);
};
var ExternalInterface = new (function NyanCat() {
this.start = startScroll;
this.stop = stopScroll;
this.mute = function() { sound.pause(); };
this.unmute = function() { sound.play(); };
})();
function flipScreen() {
var html = document.querySelector('html');
html.style.width = window.innerHeight + 'px';
html.style.height = window.innerWidth + 'px';
html.style.webkitTransform = 'rotate(-90deg) translate(0, -' + window.innerHeight + 'px)';
html.style.webkitTransformOrigin = 'top right';
html.style.webkitFontSmoothing = 'subpixel-antialiased';
html.style.overflow = 'hidden';
document.body.style.overflowY = 'hidden';
//document.body.style.zoom = '90%';
}
function scrollScreen() {
document.body.style.marginTop = -(top+=5) + 'px';
if (top >= (document.body.offsetHeight - window.innerWidth - 500) && !loadingPosts) {
console.log('loading older posts');
UIIntentionalStream.instance && UIIntentionalStream.instance.loadOlderPosts();
loadingPosts = true;
setTimeout(function(){loadingPosts = false;}, 2000);
}
}
function rainbowShift() {
rainbows.classList.toggle('shift');
}
function injectNyan() {
nyan = document.createElement('img');
nyan.src = 'http://nyan.cat/cats/original.gif';
nyan.style.position = 'fixed';
nyan.style.top = '670px'; //(window.innerWidth/2) + 'px';
nyan.style.right = '140px'; //(window.innerHeight/4) - (432/2) + 'px';
nyan.style.webkitTransform = 'rotate(90deg)';
nyan.style.zIndex = 10000;
document.body.appendChild(nyan);
}
function injectRainbows() {
rainbows = document.createElement('div');
rainbows.className = 'rainbows';
rainbows.innerHTML = '<div class="wrapper"><div class="rainbow frame-1"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-2"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-3"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-4"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-5"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-6"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-1"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-2"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-3"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-4"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-5"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-6"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-1"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-2"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-3"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-4"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-5"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-6"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-1"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-2"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-3"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-4"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-5"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-6"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-1"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-2"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-3"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-4"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-5"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-6"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-1"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-2"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-3"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-4"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-5"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-6"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-1"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-2"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-3"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-4"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-5"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-6"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-1"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-2"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-3"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-4"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-5"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div><div class="rainbow frame-6"><div class="wave wave-1"></div><div class="wave wave-2"></div><div class="wave wave-3"></div><div class="wave wave-4"></div><div class="wave wave-5"></div><div class="wave wave-6"></div><div class="wave wave-7"></div></div></div>';
rainbows.style.width = (window.innerWidth/2) + 100 + 'px';
document.body.appendChild(rainbows);
var style = document.createElement('style');
style.innerHTML = '.rainbow{font-size:16em;float:left;position:relative}.rainbow .wave{height:1em;width:3.5em}.rainbow .wave-1{background:red}.rainbow .wave-2{background:#ffa500}.rainbow .wave-3{background:yellow}.rainbow .wave-4{background:green}.rainbow .wave-5{background:blue}.rainbow .wave-6{background:#4b0082}.rainbow .wave-7{background:#ee82ee}.rainbows{position:fixed;top:0;left:100%;overflow:hidden;height:145em;font-size:1px;-webkit-transform:rotate(90deg);margin-left:-180px;-webkit-transform-origin:top left;z-index:100}.rainbows .wrapper{width:10000px}.rainbows .rainbow.frame-1{top:.5em}.rainbows .rainbow.frame-2{top:1em}.rainbows .rainbow.frame-3{top:1.5em}.rainbows .rainbow.frame-4{top:2em}.rainbows .rainbow.frame-5{top:1.5em}.rainbows .rainbow.frame-6{top:1em}.rainbows.shift .rainbow.frame-1{top:1.5em}.rainbows.shift .rainbow.frame-2{top:1em}.rainbows.shift .rainbow.frame-3{top:.5em}.rainbows.shift .rainbow.frame-4{top:0}.rainbows.shift .rainbow.frame-5{top:.5em}.rainbows.shift .rainbow.frame-6{top:1em}';
document.body.appendChild(style);
setInterval(rainbowShift, 400);
}
function startAudio() {
sound = new Audio("http://api.ning.com:80/files/3zmSvhA*3jKxFJj1I5uh5dp5oCynyyMksQjwS3JWWQNlriTzDzX61KtlFnuQtx-hEmV7NdqVgofmZvh7cXOX-UVJ47m1SR4a/nyanlooped.mp3");
sound.loop = true;
sound.autoplay = true;
}
function init() {
if (!/webkit/i.test(navigator.userAgent)) {
alert('This script only works with Google Chrome');
} else {
flipScreen();
injectNyan();
injectRainbows();
startAudio();
startScroll();
}
}
init();
return ExternalInterface;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment