LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@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; }
JS
/* == Thumbtack == */
var Thumbtack=function(){function e(){for(var e="
Explosive Menu
",n="",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 (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++) { Particles.push(new Particle()); } } 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; });
Host Instantly Drag and Drop Website Builder

 

Description

A, rather explosive, menu is just a click away. All you have to do is say fire.
Term
Mon, 11/27/2017 - 21:37

Related Codes

Pen ID
Pen ID
Pen ID