"menu"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: