spiral

by jrweinb

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top group">
    <div class="navbar-inner"> <a class="brand" href="index.html"><canvas id="world"></canvas></a>

        <div class="nav-links" id="nav-links2">
            <ul class="nav">
                <li class="active"><a href="index.html">HOME</a>
                </li>
                <li><a href="what-we-do.html">WHAT WE DO</a>
                </li>
                <li><a href="contact.html">CONTACT</a>
                </li>
                <li><a id="filter_toggle">FILTERS</a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.navbar{
    overflow:hidden;
}
#world{
    float:left;
    display:inline-block;
    width:200px;
    height:80px;
}

#nav-links2{
    float:left;
    position:relative;
    left:180px;
}

JavaScript

/**
	 * With love.
	 * http://hakim.se/experiments/
	 * http://twitter.com/hakimel
	 */

	var SCREEN_WIDTH = 200;
	var SCREEN_HEIGHT = 80;

	var RADIUS = 100;

	var RADIUS_SCALE = .3;
	var RADIUS_SCALE_MIN = .3;
	var RADIUS_SCALE_MAX = .6;

	// The number of particles that are used to generate the trail
	var QUANTITY = 25;

	var canvas;
	var context;
	var particles;

	var mouseX = (window.innerWidth - SCREEN_WIDTH);
	var mouseY = (window.innerHeight - SCREEN_HEIGHT);
	var mouseIsDown = false;

	init();

	function init() {

	    canvas = document.getElementById('world');

	    if (canvas && canvas.getContext) {
	        context = canvas.getContext('2d');

	        // Register event listeners
	        document.addEventListener('mousemove', documentMouseMoveHandler, false);
	        document.addEventListener('mousedown', documentMouseDownHandler, false);
	        document.addEventListener('mouseup', documentMouseUpHandler, false);
	        canvas.addEventListener('touchstart', canvasTouchStartHandler, false);
	        canvas.addEventListener('touchmove', canvasTouchMoveHandler, false);
	        window.addEventListener('resize', windowResizeHandler, false);

	        createParticles();

	        windowResizeHandler();

	        setInterval(loop, 1000 / 60);
	    }
	}

	function createParticles() {
	    particles = [];

	    for (var i = 0; i < QUANTITY; i++) {
	        var particle = {
	            position: {
	                x: 60,
	                y: 20
	            },
	            shift: {
	                x: 60,
	                y: 20
	            },
	            size: .3,
	            angle: 0,
	            speed: 0.01 + Math.random() * 0.04,
	            targetSize: .7,
	            fillColor: '#' + (Math.random() * 0x404040 + 0xaaaaaa | 0).toString(16),
	            orbit: RADIUS * .5 + (RADIUS * .5 * Math.random())
	        };

	        particles.push(particle);
	    }
	}

	function documentMouseMoveHandler(event) {
	    mouseX = event.clientX -...