From 79ab6e3d8d6f32a4ae3927c36edf109754d0fa18 Mon Sep 17 00:00:00 2001 From: Tommaso Lanza Date: Thu, 20 Jun 2013 19:15:19 +0100 Subject: First commit --- js/index.js | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 js/index.js (limited to 'js') diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..d398243 --- /dev/null +++ b/js/index.js @@ -0,0 +1,113 @@ +/*global */ + +(function() { + // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ + // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel + // MIT license + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || + window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + } + + if (!window.cancelAnimationFrame) { + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; + } +}()); + +Element.prototype.hasClassName = function (a) { + return new RegExp("(?:^|\\s+)" + a + "(?:\\s+|$)").test(this.className); +}; + +Element.prototype.addClassName = function (a) { + if (!this.hasClassName(a)) { + this.className = [this.className, a].join(" "); + } +}; + +Element.prototype.removeClassName = function (b) { + if (this.hasClassName(b)) { + var a = this.className; + this.className = a.replace(new RegExp("(?:^|\\s+)" + b + "(?:\\s+|$)", "g"), " "); + } +}; + +Element.prototype.toggleClassName = function (a) { + this[this.hasClassName(a) ? "removeClassName" : "addClassName"](a); +}; + + +function toDegrees (angle) { + return angle * (180 / Math.PI); +} + +function toRadians (angle) { + return angle * (Math.PI / 180); +} + +function deadCenter(){ + var el = document.querySelectorAll('#main')[0]; + el.style.lineHeight = window.innerHeight+'px'; +} + +var Shoreditch = function( elem ) { + + this.elem = elem; + this.panes = parseInt( this.elem.getAttribute('data-panes'), 15 ); + + this.colorTime = ~~( Math.random() * 360 ); + this.waveTheta = 0; + + this.colorIncrement = -1; + this.degrees = 1; + + this.animate(); +}; + +Shoreditch.prototype.getTextShadow = function( x, y, blur, hue, alpha ) { + return ', ' + x + 'px ' + y + 'px ' + blur + 'px ' + 'hsla(' + hue + ', 100%, 45%, ' + alpha + ')'; +}; + +Shoreditch.prototype.animate = function() { + var shadows = '0 0 transparent', + i, j, x, y; + this.degrees = (this.degrees !== void 0) ? this.degrees - 1 : 0; + // renders rainbow river + for ( i = 1; i < this.panes; i++ ) { + var normI = i / this.panes; + var hue = ( normI * 50 + this.colorTime * 0.5 ) % 360; + var alpha = ( 1 - normI ) * 0.8; + x = Math.cos(toRadians(this.degrees + i*Math.PI*Math.PI)) * i*(i/10); + // x = 0; + y = Math.sin(toRadians(this.degrees + i*Math.PI*Math.PI)) * i*(i*2); + shadows += this.getTextShadow( x, y, i*(i/5), hue, alpha ); + } + + this.elem.style.textShadow = shadows; + this.colorTime += this.colorIncrement; + window.requestAnimationFrame( this.animate.bind( this ) ); +}; + +window.addEventListener( 'resize', deadCenter ); + +window.addEventListener( 'DOMContentLoaded', function() { + deadCenter(); + var grov = new Shoreditch(document.querySelectorAll('#txt')[0]); +}, false ); + -- cgit v1.2.3