dynamic-long-shadow.js

Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
};
Math.degrees = function(radians) {
  return radians * 180 / Math.PI;
};
Math.ctg = function(val) {
   return 1/Math.tan(val);
}

function longShadowCSS(length, angle, color) {
	var byx = (Math.abs(Math.cos(angle)) >= Math.abs(Math.sin(angle)));
	var pos = {
		x: (Math.cos(angle) >= 0) ? 1 : -1,
		y: (Math.sin(angle) <= 0) ? 1 : -1,
	}
	var tanctg = byx ? Math.tan : Math.ctg;
	var result = '', a, b, x, y;
	for(var i = 1; i <= length; i++) {
		a = i;
		b = Math.abs(Math.round(i * tanctg(angle)));
		x = pos.x * (byx ? a : b); y = pos.y * (byx ? b : a);
		result += color+' '+ x + 'px ' + y + 'px';
		if(i < length) result += ',\n';
	}
	return result;
}

(function($) {
    $.fn.center = function() {
		var offset = this.offset();
		var width = this.outerWidth();
		var height = this.outerHeight();
		return {
			x: offset.left + width / 2,
			y: offset.top + height / 2
		}
    }
})(jQuery);

$(document).on('mousemove', function(ev) {
	var x, y, c, angle;
	$('h1').each(function() {
		c = $(this).center();
		x = c.x - ev.pageX;
		y = -(c.y - ev.pageY);
		angle = Math.atan(y/x) + ((x < 0) ? Math.PI : 0);
		$(this).css({'text-shadow': longShadowCSS(50, angle, '#eee')});
	})
});




$('.navheader').append('<input type="range" id="range" min="0" max="360">');

$('#range').on('input change', function() {
	$('h1').css({'text-shadow': longShadowCSS(200, Math.radians($(this).val()), '#fe8')});
});