123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227 |
- /**
- * Shards jQuery plug-in
- * Multilayered gradient background effect
- *
- * @homepage http://bite-software.co.uk/shards/
- * @version 1.1
- * @license MIT http://opensource.org/licenses/MIT
- */
- (function($) {
- var Plugin = function(me,c1,c2,sh,steps,wheel,light,alf,fs){
- this.el = me;
- this.sharp = true;
- this.fs = fs;
- this.filter = '';
- this.colours = {
- c1 : c1,
- c2 : c2,
- c3 : c2,
- shade : sh,
- alpha : alf,
- steps : steps,
- wheel : wheel,
- light : ~~(light)
- }
- this.init();
- }
- Plugin.prototype.init = function(){
- this.cssPrefix = false;
- var ua = navigator.userAgent;
- if(/Chrome\/(\S+)/.test(ua)|| /AppleWebKit\/(\S+)/.test(ua)) {
- this.cssPrefix = '-webkit';
- }
- else if(/Firefox\/(\S+)/.test(ua)) {
- this.cssPrefix = '-moz';
- }else if(window.opera) {
- this.cssPrefix = '-o';
- }else if(/MSIE ([^;]+)/.test(ua)) {
- this.cssPrefix = '-ms';
- };
- if(this.cssPrefix){
- var steps = this.colours.steps;
- while( steps > 0){
- this.percents = this.percentage();
- this.stringBuilder();
- this.colourFilter();
- steps -= 1;
- if(steps > 0) this.filter += ', ';
- }
- this.el.css('background-image',this.filter);
- if(this.fs) this.fit();
- }else{
- console.log('sorry bro, your browser isnt supported.');
- }
- }
- Plugin.prototype.stringBuilder = function(){
- var col = this.colours,
- c1 = this.catcol(col.c1),
- c2 = this.catcol(col.c2),
- c3 = this.catcol(col.c3),
- shade = this.catcol(col.shade),
- deg = ~~(Math.random()*360);
- this.filter += this.cssPrefix+'-linear-gradient('+deg+'deg,'+c1+' '+this.percents.a+' ,'+shade+' '+this.percents.b+', '+c2+' '+this.percents.c+', '+c3+' '+this.percents.d+')';
- }
- Plugin.prototype.catcol = function(col){
- var beg = 'rgba(',
- end = ')',
- part = col.toString();
- return beg.concat(part).concat(end);
- }
- Plugin.prototype.fit = function(){
- this.el.css({
- 'width':'100%',
- 'height': window.innerHeight
- })
- }
- Plugin.prototype.percentage = function(){
- var p1 = ~~(Math.random()*85),
- p2 = p1 + ~~(Math.random()*15),
- p3 = p2,
- p4 = 100-p2 + ~~(Math.random()*p2);
- var percents = {
- a:p1+'%',
- b:p2+'%',
- c:p3+'%',
- d:p4+'%'
- }
- return percents;
- }
- Plugin.prototype.colourFilter = function(){
- var col = this.colours;
- col.c1 = this.colstep(col.c1);
- col.c1.push(col.alpha);
- col.c2 = this.colstep(col.c2);
- col.c2.push(col.alpha);
- col.c3 = this.colstep(col.c2);
- col.c3.push(col.alpha);
- col.shade = this.colstep(col.shade);
- col.shade.push(col.alpha);
- }
- Plugin.prototype.colstep = function(col){
- var hsl = this.hsl(col),
- wheel = this.colours.wheel,
- hue = (360 * wheel);
- if(this.colours.light>3) this.colours.light = 3;
- hsl[0] = hsl[0] - (~~(Math.random()*hue/2)) + (~~(Math.random()*hue/2));
- hsl[1] = wheel * 100;
- hsl[2] = 30 * this.colours.light;
- return this.rgb(hsl);
- }
- Plugin.prototype.hsl = function(rgb){
- var r1 = rgb[0] / 255;
- var g1 = rgb[1] / 255;
- var b1 = rgb[2] / 255;
- var maxColor = Math.max(r1,g1,b1);
- var minColor = Math.min(r1,g1,b1);
- //Calculate L:
- var L = (maxColor + minColor) / 2 ;
- var S = 0;
- var H = 0;
- if(maxColor != minColor){
- //Calculate S:
- if(L < 0.5){
- S = (maxColor - minColor) / (maxColor + minColor);
- }else{
- S = (maxColor - minColor) / (2.0 - maxColor - minColor);
- }
- //Calculate H:
- if(r1 == maxColor){
- H = (g1-b1) / (maxColor - minColor);
- }else if(g1 == maxColor){
- H = 2.0 + (b1 - r1) / (maxColor - minColor);
- }else{
- H = 4.0 + (r1 - g1) / (maxColor - minColor);
- }
- }
- L = L * 100;
- S = S * 100;
- H = H * 60;
- if(H<0){
- H += 360;
- }
- var result = [H, S, L];
- return result;
- }
- Plugin.prototype.rgb = function(hsl){
- var h = hsl[0];
- var s = hsl[1];
- var l = hsl[2];
- var m1, m2, hue;
- var r, g, b;
- s /=100;
- l /= 100;
- if (s == 0)
- r = g = b = (l * 255);
- else {
- if (l <= 0.5)
- m2 = l * (s + 1);
- else
- m2 = l + s - l * s;
- m1 = l * 2 - m2;
- hue = h / 360;
- r = this.hue2rgb(m1, m2, hue + 1/3);
- g = this.hue2rgb(m1, m2, hue);
- b = this.hue2rgb(m1, m2, hue - 1/3);
- }
- return [Math.round(r), Math.round(g), Math.round(b)];
- }
- Plugin.prototype.hue2rgb = function(m1, m2, hue) {
- var v;
- if (hue < 0)
- hue += 1;
- else if (hue > 1)
- hue -= 1;
- if (6 * hue < 1)
- v = m1 + (m2 - m1) * hue * 6;
- else if (2 * hue < 1)
- v = m2;
- else if (3 * hue < 2)
- v = m1 + (m2 - m1) * (2/3 - hue) * 6;
- else
- v = m1;
- return 255 * v;
- };
- $.fn.shards = function(colour1, colour2, shadeColour, steps, wheel, lightness, alpha, fullscreen){
- var el = $(this);
- var shards = new Plugin(el,colour1,colour2,shadeColour,steps,wheel,lightness,alpha,fullscreen);
- if(fullscreen){
- $(window).resize( function(){
- shards.fit();
- });
- }
- return this.el;
- }
- })(jQuery);
|