Skip to content

Instantly share code, notes, and snippets.

@albertodelax

albertodelax/beehive.png

Last active August 29, 2015 14:26
Show Gist options
  • Save albertodelax/83a8e5bc4772e2824248 to your computer and use it in GitHub Desktop.
Save albertodelax/83a8e5bc4772e2824248 to your computer and use it in GitHub Desktop.
Download ZIP
BEEEEES???
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BEEEES???</title>
<style type="text/css">
body {
text-align: center;
}
#beehive {
cursor: pointer;
}
</style>
</head>
<body>
<img src="beehive.png" id="beehive">
<script type="text/javascript">
document.getElementById("beehive").onclick = function(){
var div = document.createElement('div');
div.style.backgroundColor = "yellow";
div.style.border = "solid black";
div.style.position = "absolute";
div.style.height = "6px";
div.style.width = "6px";
div.style.borderRadius = "100%";
div.style.left = "50%";
document.getElementsByTagName('body')[0].appendChild(div);
window.setInterval(function(){
var rand = Math.round(Math.random()*100);
var positions = [{
top: 0,
left: rand + "%"
},
{
top: rand + "%",
left: 0
},
{
top: "99%",
left: rand + "%"
},
{
bottom: rand + "%",
right: "99%"
}
];
var randomArray = Math.round(Math.random()*3);
div.style.left = positions[randomArray].left;
div.style.top = positions[randomArray].top;
div.style.transition = "all 0.5s";
}, 200);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment