<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/HarrisCarney/pen/EaEwbB?depth=everything&order=popularity&page=16&q=thumbnail&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
body {
background: #ececec;
overflow: hidden;
user-select: none;
}
#Button {
position: absolute; top: 15px; left: 15px;
width: 60px; height: 60px;
font-size: 18px;
text-align: center;
line-height: 60px;
background: #e74c3c;
color: #ececec;
cursor: pointer;
z-index: 1;
}
.Nav {
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
width: 302px; height: 302px;
font-size: 0;
transform: scale(0);
transition: transform 0.8s;
box-shadow: 0px 0px 10px #999;
z-index: 1;
}
a {
display: inline-block;
width: 150px; height: 150px;
font-size: 28px;
text-decoration: none;
line-height: 150px;
text-align: center;
text-shadow: 2px 2px 4px #666;
color: #fff;
}
a:nth-of-type(odd) { margin-right: 2px; }
a:nth-child(1) { margin-bottom: 2px; background: #1abc9c; }
a:nth-child(2) { background: #2ecc71; }
a:nth-child(3) { background: #3498db; }
a:nth-child(4) { background: #9b59b6; }
.active {
transform: scale(1);
}
canvas { position: absolute; }</style></head><body>
<div id="Button" class="fontawesome-fire"></div>
<div class="Nav">
<a href="#"><span class="fontawesome-home"></span></a>
<a href="#"><span class="fontawesome-user"></span></a>
<a href="#"><span class="fontawesome-upload"></span></a>
<a href="#"><span class="fontawesome-wrench"></span></a>
</div>
<canvas></canvas>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >/* == Thumbtack == */
var Thumbtack=function(){function e(){for(var e="<div id='Thumbnail'>Explosive Menu</div>",n="<style>@import url(https://fonts.googleapis.com/css?family=Oswald);#Thumbnail { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: #9b59b6; text-align: center; line-height: 100vh; font-family: 'Oswald'; color: #eee; font-size: 10vw; text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); z-index: 9999;}</style>",t=window.location!=window.parent.location?document.referrer:document.location,o=["/pen/","/details/","/full/","/debug/","/live/","/collab/","/professor/","/pres/","/embed/","/fullembedgrid/"],r=!0,a=0;a<o.length;a++){if (window.CP.shouldStopExecution(1)){break;}-1!==t.indexOf(o[a])&&(r=!1);
window.CP.exitedLoop(1);
}r&&(document.body.insertAdjacentHTML("afterbegin",e),document.head.insertAdjacentHTML("afterbegin",n))}return e()}();
/* == End Thumbtack == */
var canvas = $('canvas')[0];
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var Projectile;
var State = false;
var Explode = false;
var Collapse = false;
var Particles = [];
var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#9b59b6", "#f1c40f", "#e67e22", "#e74c3c"];
function Proj() {
this.radius = 5.2;
this.x = Math.random() * canvas.width;
this.y = canvas.height + this.radius;
this.color = "#e74c3c";
this.velocity = {x: 0, y: 0};
this.speed = 12;
}
Proj.prototype = {
Update: function() {
if(this.x > (canvas.width / 2) && this.x - (canvas.width / 2) <= 10 || this.x < (canvas.width / 2) && (canvas.width / 2) - this.x <= 10) {
Explode = true;
$('.Nav').addClass('active');
} else {
this.dx = (canvas.width / 2) - this.x;
this.dy = (canvas.height / 2) - this.y;
this.distance = Math.sqrt(this.dx * this.dx + this.dy * this.dy);
this.velocity.x = (this.dx/this.distance) * this.speed;
this.velocity.y = (this.dy/this.distance) * this.speed;
this.x += this.velocity.x;
this.y += this.velocity.y;
}
},
Draw: function() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.fillStyle = this.color;
context.fill();
context.closePath();
}
};
function Particle() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.radius = 4;
this.color = colors[Math.round(Math.random() * (colors.length + 1))];
this.velocity = {x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 10, y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 10};
this.speed = 25;
this.active = true;
}
Particle.prototype = {
Update: function() {
if(Collapse) {
this.dx = (canvas.width / 2) - this.x;
this.dy = (canvas.height / 2) - this.y;
this.distance = Math.sqrt(this.dx * this.dx + this.dy * this.dy);
this.velocity.x = (this.dx/this.distance) * this.speed;
this.velocity.y = (this.dy/this.distance) * this.speed;
this.x += this.velocity.x;
this.y += this.velocity.y;
if(this.x > (canvas.width / 2) && this.x - (canvas.width / 2) <= 15 || this.x < (canvas.width / 2) && (canvas.width / 2) - this.x <= 15) {
if(this.y > (canvas.height / 2) && this.y - (canvas.height / 2) <= 15 || this.y < (canvas.height / 2) && (canvas.height / 2) - this.y <= 15) {
this.active = false;
}
}
} else {
this.x += this.velocity.x;
this.y += this.velocity.y;
}
},
Draw: function() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.lineWidth = 2.2;
context.strokeStyle = this.color;
context.stroke();
context.closePath();
}
};
function Update() {
if(Particles.length < 100) {
for(var x = Particles.length; x < 100; x++) {if (window.CP.shouldStopExecution(2)){break;}
Particles.push(new Particle());
}
window.CP.exitedLoop(2);
}
if(Explode || Collapse) {
Particles.forEach(function(particle) {
particle.Update();
});
}
Particles = Particles.filter(function(particle) {
return particle.active;
});
if(State && !Explode) {
Projectile.Update();
}
Render();
requestAnimationFrame(Update);
}
function Render() {
context.clearRect(0, 0, canvas.width, canvas.height);
if(Collapse || Explode) {
Particles.forEach(function(particle) {
particle.Draw();
});
}
if(State && !Explode) {
Projectile.Draw();
}
}
$('#Button').click(function() {
State = !State;
if(Explode && State == false) {
Collapse = true;
} else {
Collapse = false;
Particles = [];
}
if(State) {
Projectile = new Proj();
} else {
Projectile = null;
Explode = false;
}
if(!State) {
$('.Nav').removeClass('active');
}
$(this).toggleClass('fontawesome-fire');
$(this).toggleClass('fontawesome-remove');
});
$(document).ready(function() {
Update();
});
$(window).resize(function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
//# sourceURL=pen.js
</script>
</body></html>
