/*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 );