├── README.md
├── pxgradient-1.0.3.min.js
└── pxgradient-1.0.3.js


/README.md:
--------------------------------------------------------------------------------
1 | # pxgradient
2 | Text Gradient jQuery
3 | 
4 | Check out the archived article: http://web.archive.org/web/20160314113256/http://mrnix.ru/pxgradient/
5 | 


--------------------------------------------------------------------------------
/pxgradient-1.0.3.min.js:
--------------------------------------------------------------------------------
1 | (function(e){e("head").append('<style type="text/css">.sn-pxg .pxg-set{user-select:none;-moz-user-select:none;-webkit-user-select:none;}.sn-pxg span.pxg-source{position:relative;display:inline-block;z-index:2;}.sn-pxg U.pxg-set,.sn-pxg U.pxg-set S,.sn-pxg U.pxg-set S B{left:0;right:0;top:0;bottom:0;height:inherit;width:inherit;position:absolute;display:inline-block;text-decoration:none;font-weight:inherit;}.sn-pxg U.pxg-set S{overflow:hidden;}.sn-pxg U.pxg-set{text-decoration:none;z-index:1;display:inline-block;position:relative;}</style>');e.fn.pxgradient=function(t){function r(e){if("#"==e.substr(0,1)){e=e.substr(1)}if(3==e.length){e=e.substr(0,1)+e.substr(0,1)+e.substr(1,1)+e.substr(1,1)+e.substr(2,1)+e.substr(2,1)}return[parseInt(e.substr(0,2),16),parseInt(e.substr(2,2),16),parseInt(e.substr(4,2),16)]}function i(e){var t="0123456789abcdef";return"#"+t.charAt(parseInt(e[0]/16))+t.charAt(e[0]%16)+t.charAt(parseInt(e[1]/16))+t.charAt(e[1]%16)+t.charAt(parseInt(e[2]/16))+t.charAt(e[2]%16)}function s(e,n){var r=e>0?e/n:0;for(var i=0;i<t.colors.length;i++){fStopPosition=i/(t.colors.length-1);fLastPosition=i>0?(i-1)/(t.colors.length-1):0;if(r==fStopPosition){return t.colors[i]}else if(r<fStopPosition){fCurrentStop=(r-fLastPosition)/(fStopPosition-fLastPosition);return o(t.RGBcolors[i-1],t.RGBcolors[i],fCurrentStop)}}return t.colors[t.colors.length-1]}function o(e,t,n){var r=[];for(var s=0;s<3;s++){r[s]=e[s]+Math.round((t[s]-e[s])*n)}return i(r)}var t=e.extend({step:10,colors:["#ffcc00","#cc0000","#000000"],dir:"y"},t);t.RGBcolors=[];for(var n=0;n<t.colors.length;n++){t.RGBcolors[n]=r(t.colors[n])}return this.each(function(n,r){var i=e(r);if(!i.hasClass("sn-pxg")){var o=i.html();i.html('<span class="pxg-source" style="visibility: hidden;">'+o+"</span>").append('<u class="pxg-set"></u>');var u=i.find(".pxg-set");var a=i.find(".pxg-source");var f=a.innerWidth();var l=a.innerHeight();a.hide();i.addClass("sn-pxg");if(t.dir=="x"){var c=f}else if(t.dir=="y"){var c=l}var h=Math.floor(c/t.step);var p=h;var d=c-h*t.step;if(d>0){p++}u.css({width:f,height:l});var v=0;var m="";if(t.dir=="x"){for(var n=0;n<p;n++){var g=s(v,c);m+='<s style="height:'+l+"px;width:"+t.step+"px;left:"+v+"px;color:"+g+'"><b style="left:-'+v+"px;width:"+f+"px;height:"+l+'px;">'+o+"</b></s>";v=v+t.step}}else if(t.dir=="y"){for(var n=0;n<p;n++){var g=s(v,c);m+='<s style="width:'+f+"px;height:"+t.step+"px;top:"+v+"px;color:"+g+'"><b style="top:-'+v+"px;height:"+f+"px;height:"+l+'px;">'+o+"</b></s>";v=v+t.step}}u.append(m)}})}})(jQuery)


--------------------------------------------------------------------------------
/pxgradient-1.0.3.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author Sergey Nikitin (mrnix@ya.ru)
  3 |  * @author Andrew Lechev
  4 |  * @author Vasily Mamaevsky
  5 |  *
  6 |  * inspired by and used http://www.artlebedev.ru/tools/technogrette/js/gradient-text/
  7 |  * @link mrnix.ru/pxgradient
  8 |  * @version 1.0.2
  9 |  * @date 30.03.2012
 10 |  * @requires jQuery
 11 |  *
 12 |  * Description:
 13 |  * pxgradient is a jQuery plugin that paints text in gradient colors by pixel
 14 |  * 
 15 |  * Usage:
 16 |  * $(selector).pxgradient(options);
 17 |  * 
 18 |  * options is an object contents configuraton paramenters:
 19 |  * {Number} step - Step Color. The smaller the number, the greater the load. Default: 10
 20 |  * {Array}  colors - array of hex colors. Default: ["#ffcc00", "#cc0000", "#000000"];
 21 |  * {String} dir - gradient direction. "x" - horizontal,  "y" - vertical
 22 |  */
 23 | (function($){
 24 | 
 25 |   $('head').append('<style type="text/css">.sn-pxg .pxg-set{user-select:none;-moz-user-select:none;-webkit-user-select:none;}.sn-pxg span.pxg-source{position:relative;display:inline-block;z-index:2;}.sn-pxg U.pxg-set,.sn-pxg U.pxg-set S,.sn-pxg U.pxg-set S B{left:0;right:0;top:0;bottom:0;height:inherit;width:inherit;position:absolute;display:inline-block;text-decoration:none;font-weight:inherit;}.sn-pxg U.pxg-set S{overflow:hidden;}.sn-pxg U.pxg-set{text-decoration:none;z-index:1;display:inline-block;position:relative;}</style>')
 26 | 
 27 |   $.fn.pxgradient=function(options){
 28 |     
 29 |     var options = $.extend({
 30 |       step: 10,
 31 |       colors: ["#ffcc00","#cc0000","#000000"],
 32 |       dir: "y"
 33 |     }, options);
 34 | 
 35 |     options.RGBcolors = [];
 36 | 
 37 |     for(var i=0;i<options.colors.length;i++){
 38 |       options.RGBcolors[i] = hex2Rgb(options.colors[i]);
 39 |     }
 40 | 
 41 |     return this.each(function(i,e){
 42 | 
 43 |       var pxg = $(e);
 44 | 
 45 |       if(!pxg.hasClass("sn-pxg")) {
 46 | 
 47 |         var pxg_source = pxg.html();
 48 |         pxg
 49 |           .html('<span class="pxg-source" style="visibility: hidden;">'+pxg_source+'</span>')
 50 |           .append('<u class="pxg-set"></u>');
 51 | 
 52 |         
 53 |         var pxg_set = pxg.find(".pxg-set");
 54 |         var pxg_text = pxg.find(".pxg-source");
 55 |         var pxg_w = pxg_text.innerWidth();
 56 |         var pxg_h = pxg_text.innerHeight();
 57 | 
 58 |         pxg_text.hide();
 59 |         pxg.addClass("sn-pxg");
 60 | 
 61 |         if ( options.dir == "x" ) { var blocksize = pxg_w; }
 62 |         else if ( options.dir =="y" ) { var blocksize = pxg_h; }
 63 | 
 64 |         var fullsteps = Math.floor( blocksize/options.step );
 65 |         var allsteps  = fullsteps;
 66 |         var laststep  = ( blocksize-( fullsteps * options.step) );
 67 |         
 68 |         if( laststep>0 ) { allsteps++; }
 69 | 
 70 |         pxg_set.css({ width: pxg_w, height: pxg_h });
 71 | 
 72 |         var offleft = 0;
 73 |         var pxg_set_html = '';
 74 | 
 75 |         if(options.dir == "x"){
 76 |           for(var i=0; i<allsteps; i++){
 77 |             var color = getColor ( offleft, blocksize );
 78 |             pxg_set_html += '<s style="height:'+pxg_h+'px;width:'+options.step+'px;left:'+offleft+'px;color:'+color+'"><b style="left:-'+offleft+'px;width:'+pxg_w+'px;height:'+pxg_h+'px;">'+pxg_source+'</b></s>';
 79 |             offleft = offleft + options.step;
 80 |           }
 81 |         }
 82 |         
 83 |         else if(options.dir=="y"){
 84 |           for(var i=0; i<allsteps; i++){
 85 |             var color=getColor(offleft,blocksize);
 86 |             pxg_set_html += '<s style="width:'+pxg_w+'px;height:'+options.step+'px;top:'+offleft+'px;color:'+color+'"><b style="top:-'+offleft+'px;height:'+pxg_w+'px;height:'+pxg_h+'px;">'+pxg_source+'</b></s>';
 87 |             offleft = offleft + options.step;
 88 |           }
 89 |         }
 90 | 
 91 |         pxg_set.append(pxg_set_html);
 92 |       }
 93 |     });
 94 | 
 95 | 
 96 |     /**
 97 |      * @authors Andrew Lechev and Vasily Mamaevsky
 98 |      * Convert HEX to RGB.
 99 |      * @param {String} hex
100 |      * @return {Array}
101 |      */
102 |     function hex2Rgb(hex){
103 |       if('#'==hex.substr(0,1)){
104 |         hex=hex.substr(1);
105 |       }
106 |       if (3==hex.length){
107 |         hex=hex.substr(0,1)+hex.substr(0,1)+hex.substr(1,1)+hex.substr(1,1)+hex.substr(2,1)+hex.substr(2,1);
108 |       }
109 |       return [parseInt(hex.substr(0,2),16),parseInt(hex.substr(2,2),16),parseInt(hex.substr(4,2),16)];
110 |     }
111 | 
112 |     /**
113 |      * @authors Andrew Lechev and Vasily Mamaevsky
114 |      * Convert RGB to HEX.
115 |      * @param {String} hex
116 |      * @return {Array}
117 |      */
118 |     function rgb2Hex(rgb){
119 |       var s = '0123456789abcdef';
120 |       return '#'+s.charAt(parseInt(rgb[0]/16))+s.charAt(rgb[0]%16)+s.charAt(parseInt(rgb[1]/16))+s.charAt(rgb[1]%16)+s.charAt(parseInt(rgb[2]/16))+s.charAt(rgb[2]%16);
121 |     }
122 | 
123 | 
124 |     /**
125 |      * @authors Andrew Lechev and Vasily Mamaevsky
126 |      * Convert px to color
127 |      */
128 |     function getColor(off,blocksize){
129 |       var fLeft=(off>0)?(off/blocksize):0;
130 |       for (var i=0;i<options.colors.length;i++){
131 |         fStopPosition=(i/(options.colors.length-1));
132 |         fLastPosition=(i>0)?((i-1)/(options.colors.length-1)):0;
133 |         if(fLeft==fStopPosition){
134 |           return options.colors[i];
135 |         }
136 |         else if(fLeft<fStopPosition){
137 |           fCurrentStop=(fLeft-fLastPosition)/(fStopPosition-fLastPosition);
138 |           return getMidColor(options.RGBcolors[i-1],options.RGBcolors[i],fCurrentStop);
139 |         }
140 |       }
141 |       return options.colors[options.colors.length-1];
142 |     }
143 |     
144 |     /**
145 |      * @authors Andrew Lechev and Vasily Mamaevsky
146 |      * Get middle color from start to end
147 |      */
148 |     function getMidColor(aStart,aEnd,fMidStop){
149 |       var aRGBColor=[];
150 |       for (var i=0;i<3;i++){
151 |         aRGBColor[i]=aStart[i]+Math.round((aEnd[i]-aStart[i])*fMidStop)
152 |       }
153 |       return rgb2Hex(aRGBColor)
154 |     }
155 |   }
156 | 
157 | })(jQuery);


--------------------------------------------------------------------------------