Hey guys! Go to your favourite website and execute this script in console to see amazing photo cannon! :) (Prototype version - feel free to improve this code and message me source back.).
function place_gun()
{
var canon = document.createElement('div');
canon.style.position = 'absolute';
canon.style.top = window.innerHeight/2 - 15 + 'px';
canon.style.width = 100 + 'px';
canon.style.height = 30 + 'px';
canon.style.border = '1px solid';
canon.style.borderTopLeftRadius = '200px';
canon.style.borderBottomLeftRadius = '200px';
canon.style.backgroundColor = 'red';
canon.style.left = 10 + 'px';
canon.id = 'canon';
canon.style.textAlign = 'center';
document.body.appendChild(canon);
document.onmousemove = function(e)
{
x = e.pageX - 60;
y = window.innerHeight/2 - e.pageY;
angle = Math.atan(y/x)*180/Math.PI
canon.style.webkitTransform = 'rotate('+angle*(-1)+'deg)';
}
}
function load_gun()
{
var images = document.images;
var index = -1;
var elements = document.getElementsByTagName("*");
for(i=0;i<=elements.length-1;i++)
{
elements[i].style.visibility = 'hidden';
}
document.getElementById('canon').innerHTML = images.length;
document.getElementById('canon').style.visibility = 'visible';
document.onclick = function(e)
{
index = index + 1;
if((images.length)-index*2-1 <0) return;
images[index].style.opacity = 0;
document.getElementById('canon').innerHTML = (images.length)-index*2-1;
var el = document.createElement('img');
el.style.width = images[index].offsetWidth + 'px';
el.style.height = images[index].offsetHeight + 'px';
el.src = images[index].src;
el.style.position = 'fixed';
el.style.visibility = 'visible';
el.style.top = canon.offsetTop + 'px'
el.style.left = -(el.offsetWidth)-10 + 'px';
el.style.transition = 'left 1s, top 1s';
el.style.transitionTimingFunction = 'ease-in';
el.style.webkitTransform = 'rotate('+angle*(-1)+'deg)';
el.style.border = '1px solid';
document.body.appendChild(el);
setTimeout(function a(){el.style.left = e.pageX + 'px';el.style.top = e.pageY + 'px';},1);
}
}place_gun();load_gun();
Comments