Starfield + nav

.gitignore

@@ -0,0 +1,2 @@
+*.swp
+*~

js/jquery.bxSlider/bx_styles/bx_styles.css

@@ -0,0 +1,107 @@
+/* @override http://localhost/bxslider_v3_plugin/css/styles.css */
+
+/*
+ * To change the color scheme of slider change each 
+ * background property for each of the five styles below
+ */
+
+/*next button*/
+.bx-next {
+	position:absolute;
+	top:40%;
+	right:-50px;
+	z-index:999;
+	width: 30px;
+	height: 30px;
+	text-indent: -999999px;
+	background: url(gray_next.png) no-repeat 0 -30px;
+}
+
+/*previous button*/
+.bx-prev {
+	position:absolute;
+	top:40%;
+	left:-50px;
+	z-index:999;
+	width: 30px;
+	height: 30px;
+	text-indent: -999999px;
+	background: url(gray_prev.png) no-repeat 0 -30px;
+}
+
+/*pager links*/
+.bx-pager a {
+	margin-right: 5px;
+	color: #fff;
+	padding: 3px 8px 3px 6px;
+	font-size: 12px;
+	zoom:1;
+	background: url(gray_pager.png) no-repeat 0 -20px;
+}
+
+/*auto start button*/
+.bx-auto .start {
+	background: url(gray_auto.png) no-repeat 0 2px;
+	padding-left: 13px;
+}
+
+/*auto stop button*/
+.bx-auto .stop {
+	background: url(gray_auto.png) no-repeat 0 -14px;
+	padding-left: 13px;
+}
+
+/*
+ * End color scheme styles
+ */
+
+
+/*next/prev button hover state*/
+.bx-next:hover,
+.bx-prev:hover {
+	background-position: 0 0;
+}
+
+/*pager links hover and active states*/
+.bx-pager .pager-active,
+.bx-pager a:hover {
+	background-position: 0 0;
+}
+
+/*pager wrapper*/
+.bx-pager {
+	text-align:center;
+	padding-top: 7px;
+	font-size:12px;
+	color:#666;
+}
+
+/*captions*/
+.bx-captions {
+	text-align:center;
+	font-size: 12px;
+	padding: 7px 0;
+	color: #666;
+}
+
+/*auto controls*/
+.bx-auto {
+	text-align: center;
+	padding-top: 15px;
+}
+
+.bx-auto a {
+	color: #666;
+	font-size: 12px;
+}
+
+
+
+
+
+
+
+
+
+
+

js/jquery.bxSlider/jquery.easing.1.3.js

@@ -0,0 +1,205 @@
+/*
+ * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
+ *
+ * Uses the built in easing capabilities added In jQuery 1.1
+ * to offer multiple easing options
+ *
+ * TERMS OF USE - jQuery Easing
+ * 
+ * Open source under the BSD License. 
+ * 
+ * Copyright © 2008 George McGinley Smith
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without modification, 
+ * are permitted provided that the following conditions are met:
+ * 
+ * Redistributions of source code must retain the above copyright notice, this list of 
+ * conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * of conditions and the following disclaimer in the documentation and/or other materials 
+ * provided with the distribution.
+ * 
+ * Neither the name of the author nor the names of contributors may be used to endorse 
+ * or promote products derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ *
+*/
+
+// t: current time, b: begInnIng value, c: change In value, d: duration
+jQuery.easing['jswing'] = jQuery.easing['swing'];
+
+jQuery.extend( jQuery.easing,
+{
+	def: 'easeOutQuad',
+	swing: function (x, t, b, c, d) {
+		//alert(jQuery.easing.default);
+		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
+	},
+	easeInQuad: function (x, t, b, c, d) {
+		return c*(t/=d)*t + b;
+	},
+	easeOutQuad: function (x, t, b, c, d) {
+		return -c *(t/=d)*(t-2) + b;
+	},
+	easeInOutQuad: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t + b;
+		return -c/2 * ((--t)*(t-2) - 1) + b;
+	},
+	easeInCubic: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t + b;
+	},
+	easeOutCubic: function (x, t, b, c, d) {
+		return c*((t=t/d-1)*t*t + 1) + b;
+	},
+	easeInOutCubic: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t + b;
+		return c/2*((t-=2)*t*t + 2) + b;
+	},
+	easeInQuart: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t*t + b;
+	},
+	easeOutQuart: function (x, t, b, c, d) {
+		return -c * ((t=t/d-1)*t*t*t - 1) + b;
+	},
+	easeInOutQuart: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+		return -c/2 * ((t-=2)*t*t*t - 2) + b;
+	},
+	easeInQuint: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t*t*t + b;
+	},
+	easeOutQuint: function (x, t, b, c, d) {
+		return c*((t=t/d-1)*t*t*t*t + 1) + b;
+	},
+	easeInOutQuint: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+		return c/2*((t-=2)*t*t*t*t + 2) + b;
+	},
+	easeInSine: function (x, t, b, c, d) {
+		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+	},
+	easeOutSine: function (x, t, b, c, d) {
+		return c * Math.sin(t/d * (Math.PI/2)) + b;
+	},
+	easeInOutSine: function (x, t, b, c, d) {
+		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+	},
+	easeInExpo: function (x, t, b, c, d) {
+		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+	},
+	easeOutExpo: function (x, t, b, c, d) {
+		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+	},
+	easeInOutExpo: function (x, t, b, c, d) {
+		if (t==0) return b;
+		if (t==d) return b+c;
+		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+	},
+	easeInCirc: function (x, t, b, c, d) {
+		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+	},
+	easeOutCirc: function (x, t, b, c, d) {
+		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+	},
+	easeInOutCirc: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+	},
+	easeInElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+	},
+	easeOutElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+	},
+	easeInOutElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+	},
+	easeInBack: function (x, t, b, c, d, s) {
+		if (s == undefined) s = 1.70158;
+		return c*(t/=d)*t*((s+1)*t - s) + b;
+	},
+	easeOutBack: function (x, t, b, c, d, s) {
+		if (s == undefined) s = 1.70158;
+		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+	},
+	easeInOutBack: function (x, t, b, c, d, s) {
+		if (s == undefined) s = 1.70158; 
+		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+	},
+	easeInBounce: function (x, t, b, c, d) {
+		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
+	},
+	easeOutBounce: function (x, t, b, c, d) {
+		if ((t/=d) < (1/2.75)) {
+			return c*(7.5625*t*t) + b;
+		} else if (t < (2/2.75)) {
+			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+		} else if (t < (2.5/2.75)) {
+			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+		} else {
+			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+		}
+	},
+	easeInOutBounce: function (x, t, b, c, d) {
+		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
+		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
+	}
+});
+
+/*
+ *
+ * TERMS OF USE - EASING EQUATIONS
+ * 
+ * Open source under the BSD License. 
+ * 
+ * Copyright © 2001 Robert Penner
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without modification, 
+ * are permitted provided that the following conditions are met:
+ * 
+ * Redistributions of source code must retain the above copyright notice, this list of 
+ * conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * of conditions and the following disclaimer in the documentation and/or other materials 
+ * provided with the distribution.
+ * 
+ * Neither the name of the author nor the names of contributors may be used to endorse 
+ * or promote products derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ *
+ */

js/slider.js

@@ -0,0 +1,17 @@
+$(function(){
+  var slider = $('#slider').bxSlider({
+    controls: false,
+		easing: 'easeInOutCubic'
+		//mode: 'fade'
+  });
+
+  $('#go-prev').click(function(){
+    slider.goToPreviousSlide();
+    return false;
+  });
+
+  $('#go-next').click(function(){
+    slider.goToNextSlide();
+    return false;
+  });
+}); 

nav.htm

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Summer Webfest</title>
+        <meta charset="utf-8">
+        <meta name="description" content="Summer Webfest">
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
+        <script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
+				<script src="js/jquery.bxSlider/jquery.easing.1.3.js"></script>
+				<script src="js/jquery.bxSlider/jquery.bxSlider.min.js"></script>
+        <script src="js/javascript.js"></script>
+				<script src="js/slider.js"></script>
+        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
+				<style>
+					body {
+						background: url(img/testbg.jpg) no-repeat;
+						background-size: 100%;
+						margin: 0;
+						padding: 0;
+					}
+					.slide {
+						font-size: 100px;
+					}
+
+					.arrow {
+					}
+
+					#go-next, #go-prev {
+						transition: opacity 0.5s;
+						-moz-transition: opacity 0.5s; /* Firefox 4 */
+						-webkit-transition: opacity 0.5s; /* Safari and Chrome */
+						-o-transition: opacity 0.5s; /* Opera */
+
+						opacity: 0.3;
+						top: 0;
+						bottom: 0;
+						padding-top: 25%;
+						overflow: hidden;
+						display: block;
+						height: 100%;
+						position: fixed;
+						width: 5%;
+						text-align: center;
+						z-index: 2;
+					}
+
+					#go-next:hover, #go-prev:hover {
+						opacity: 0.7;
+						cursor: pointer;
+					}
+
+					#go-prev {
+						background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
+						background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
+						background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
+						background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
+						background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
+						background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
+						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
+
+						left: 0;
+					}
+
+					#go-next {
+						background: -moz-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+						background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
+						background: -webkit-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+						background: -o-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+						background: -ms-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
+						background: linear-gradient(to right, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* W3C */
+						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
+
+						right: 0;
+					}
+				</style>
+    </head>
+    <body>
+				<a id="go-prev"><img class="arrow" src="img/arrow_left.png"/></a>
+				<a id="go-next"><img class="arrow" src="img/arrow_right.png"/></a>
+
+				<ul id="slider">
+					<li class="slide"><h1>First slide</h1>
+					<li class="slide"><h1>Second slide</h1>
+					<li class="slide"><h1>Third slide</h1>
+				</ul>
+    </body>
+</html>

starfield/index.htm

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+	<meta charset="utf-8">
+	<title>Particle world</title>
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
+<style>
+
+* { padding: 0; margin: 0; }
+
+html, body { height: 100%; width: 100%; }
+
+body {
+	color: #FFF;
+	overflow: hidden;
+
+	font-size: 1em;
+
+	-webkit-transition:all .2s linear;
+		 -moz-transition:all .2s linear; 
+			 -o-transition:all .2s linear; 
+					transition:all .2s linear; 
+}
+
+@media screen and (max-width:1000px) {
+	body { font-size:1em; }
+}
+@media screen and (max-width:900px) {
+	body { font-size:0.9em; }
+}
+@media screen and (max-width:800px) {
+	body { font-size:0.8em; }
+}
+@media screen and (max-width:600px) {
+	body { font-size:0.7em; }
+}
+@media screen and (max-width:400px) {
+	body { font-size:0.6em; }
+}
+@media screen and (max-width:300px) {
+	body { font-size:0.5em; }
+}
+
+#title {
+	position: absolute;
+	top: 40%;
+	left: 0; right: 0;
+	z-index: 3;
+	font-family: 'Open Sans';
+	font-weight: 300;	
+	text-align: center;
+}
+
+h1 { font-size: 5.5em; }
+h2 { font-size: 3.25em; font-style: italic }
+
+canvas { 
+	position: absolute; 
+	z-index: 2;
+}
+
+iframe, audio { z-index: 1;}
+</style>
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+</head>
+
+<body>
+	<canvas id="c"></canvas>
+	<div id="title">
+		<h1>we're all made of particles</h1>
+	</div>
+	<script type="text/javascript" src="starfield.js"></script>
+</body>
+</html>

starfield/starfield.js

@@ -0,0 +1,98 @@
+// requestAnimFrame shim
+window.requestAnimFrame = (function()
+{
+   return  window.requestAnimationFrame       || 
+           window.webkitRequestAnimationFrame || 
+           window.mozRequestAnimationFrame    || 
+           window.oRequestAnimationFrame      || 
+           window.msRequestAnimationFrame     || 
+           function(callback)
+           {
+               window.setTimeout(callback);
+           };
+})();
+
+// remove frame margin and scrollbars when maxing out size of canvas
+document.body.style.margin = "0px";
+document.body.style.overflow = "hidden";
+
+// get dimensions of window and resize the canvas to fit
+var width = window.innerWidth,
+    height = window.innerHeight,
+    canvas = document.getElementById("c");
+
+canvas.width = width;
+canvas.height = height;
+
+// get 2d graphics context and set global alpha
+var G=canvas.getContext("2d");
+G.globalAlpha=0.25;
+
+// setup aliases
+var Rnd = Math.random,
+    Sin = Math.sin,
+    Floor = Math.floor;
+
+// constants and storage for objects that represent star positions
+var warpZ = 30,
+    units = 200,
+    stars = [],
+    Z = 0.025 + (1/25 * 2);
+   
+// function to reset a star object
+function resetstar(a)
+{
+   a.x = (Rnd() * width - (width * 0.5)) * warpZ;
+   a.y = (Rnd() * height - (height * 0.5)) * warpZ;
+   a.z = warpZ;
+   a.px = 0;
+   a.py = 0;
+}
+
+// initial star setup
+for (var i=0, n; i<units; i++)
+{
+   n = {};
+   resetstar(n);
+   stars.push(n);
+}
+
+var myImage = new Image();
+
+myImage.src = "star.png";
+
+// star rendering anim function
+var rf = function()
+{
+   // clear background
+   G.fillStyle = "#000";
+   G.fillRect(0, 0, width, height);
+
+   // update all stars
+   for (var i=0; i<units; i++)
+   {
+      var n = stars[i],            // the star
+          xx = n.x / n.z,          // star position
+          yy = n.y / n.z,
+          e = (5.0 / n.z + 1) * 2;   // size i.e. z
+      
+      if (n.px !== 0)
+      {
+				//G.fillRect(n.x/n.z, n.y/n.z, e, e);
+        G.drawImage(myImage, n.px + width/2, n.py + height/2, 1/n.z*width/10, 1/n.z*width/10);
+      }
+
+      n.px = xx;
+      n.py = yy;
+      n.z -= Z;
+      
+      if (n.z < Z || n.px > width || n.py > height)
+      {
+         resetstar(n);
+      }
+   }
+
+   requestAnimFrame(rf);
+};
+requestAnimFrame(rf);
+