Skip to content

Instantly share code, notes, and snippets.

@apathetic

apathetic/Text Swapper

Created May 21, 2012 06:09
Show Gist options
  • Save apathetic/2760709 to your computer and use it in GitHub Desktop.
Save apathetic/2760709 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery: swappy
Raw
Text Swapper
/*
* text swappy
* experiment in transitioning individual letters in different headers
* requires: textshadow.js, color.js (minified at the bottom)
*
* really just a work in progress I needed to temporarily share
*/
(function($){
// PRIVATE METHODS
function injector(t, splitter, klass) {
var a = t.text().split(splitter), inject = '';
if (a.length) {
$(a).each(function(i, item) {
inject += '<span class="'+klass+i+'">'+item+'</span>';
});
t.empty().append(inject);
}
}
function rotateTitle(jitter) {
console.log('Next title...');
var that = $(this);
$(this).data().current++;
if ( $(this).data('current') >= headings.length) { $(this).data('current', 0); }
var current = $(this).data('current');
for (var i=0; i < longest; i++) {
var rand = Math.floor(Math.random() * jitter);
(function(x, y) {
setTimeout(function() {
/* * /
$('.char'+x, that ).animate({'opacity':0}, function(){
$(this).text( headings[current][x] ).animate({'opacity':1});
});
/* */
$('.char'+x, that ).animate({
// 'color':'rgba(255,255,255,0)',
// 'font-size':'+=10px',
'textShadowBlur': 80,
// 'textShadowColor': 'rgba(255,255,255,0)'
// 'textShadow': '0 0 50px #fff'
}, 1000, function(){
$(this).text( headings[current][x] ).animate({
// 'color':'rgba(0,0,0,1)',
// 'font-size':'-=10px',
'textShadowBlur': 0,
// 'textShadowColor': 'rgba(0,0,0,1)'
// 'textShadow': '0 0 0 #000'
}, 2000);
});
/* */
}, y);
})(i, rand);
}
}
// TODO don't leave these here:
var headings = new Array();
var longest = 0;
var timer;
var methods = {
init : function(options) {
var opts = $.extend({
heading: 'h1',
scope: 'char',
jitter: 1500,
delay: 6000
}, options || {});
return this.each(function() {
var splitter = (opts.scope == 'word') ? ' ' : '';
// $(opts.heading, this).not(':first').hide();
$(opts.heading, this).hide();
$(opts.heading, this).each(function(i,v){
headings[i] = v.innerHTML;
// headings[i] = v.innerHTML.split(splitter)
if(headings[i].length > longest) longest = headings[i].length;
});
// longest = Math.max.apply(Math, $.map(headings, function(el) { return el.length }));
headings = $.map(headings, function(a) { return a + new Array(longest - a.length + 1).join(' '); })
var container = $('<h1></h1>');
spans = longest;
while(spans--) {
container.prepend("<span class='char" + spans + "'></span>");
}
$(this).prepend(container);
// injector( $(opts.heading).eq(0), splitter, opts.scope);
container.data('current', -1);
rotateTitle.apply( container, [opts.jitter]);
timer = setInterval(
function(){
rotateTitle.apply( container, [opts.jitter]);
}, opts.delay
);
});
},
stop : function() {
console.log('Stopping...');
clearTimeout(timer);
}
};
$.fn.letterswapper = function( method ) {
// Method calling logic
if ( method && methods[method] ) {
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
} else if ( method === 'letters' || ! method ) {
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
}
$.error( 'Method ' + method + ' does not exist on N/A FX' );
return this;
};
})(jQuery);
/*
// jQuery rgba COLOUR PLUGIN:
// (function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.curCSS(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);
(function(b){var c={aliceblue:{r:240,g:248,b:255},antiquewhite:{r:250,g:235,b:215},aqua:{r:0,g:255,b:255},aquamarine:{r:127,g:255,b:212},azure:{r:240,g:255,b:255},beige:{r:245,g:245,b:220},bisque:{r:255,g:228,b:196},black:{r:0,g:0,b:0},blanchedalmond:{r:255,g:235,b:205},blue:{r:0,g:0,b:255},blueviolet:{r:138,g:43,b:226},brown:{r:165,g:42,b:42},burlywood:{r:222,g:184,b:135},cadetblue:{r:95,g:158,b:160},chartreuse:{r:127,g:255,b:0},chocolate:{r:210,g:105,b:30},coral:{r:255,g:127,b:80},cornflowerblue:{r:100,g:149,b:237},cornsilk:{r:255,g:248,b:220},crimson:{r:220,g:20,b:60},cyan:{r:0,g:255,b:255},darkblue:{r:0,g:0,b:139},darkcyan:{r:0,g:139,b:139},darkgoldenrod:{r:184,g:134,b:11},darkgray:{r:169,g:169,b:169},darkgreen:{r:0,g:100,b:0},darkgrey:{r:169,g:169,b:169},darkkhaki:{r:189,g:183,b:107},darkmagenta:{r:139,g:0,b:139},darkolivegreen:{r:85,g:107,b:47},darkorange:{r:255,g:140,b:0},darkorchid:{r:153,g:50,b:204},darkred:{r:139,g:0,b:0},darksalmon:{r:233,g:150,b:122},darkseagreen:{r:143,g:188,b:143},darkslateblue:{r:72,g:61,b:139},darkslategray:{r:47,g:79,b:79},darkslategrey:{r:47,g:79,b:79},darkturquoise:{r:0,g:206,b:209},darkviolet:{r:148,g:0,b:211},deeppink:{r:255,g:20,b:147},deepskyblue:{r:0,g:191,b:255},dimgray:{r:105,g:105,b:105},dimgrey:{r:105,g:105,b:105},dodgerblue:{r:30,g:144,b:255},firebrick:{r:178,g:34,b:34},floralwhite:{r:255,g:250,b:240},forestgreen:{r:34,g:139,b:34},fuchsia:{r:255,g:0,b:255},gainsboro:{r:220,g:220,b:220},ghostwhite:{r:248,g:248,b:255},gold:{r:255,g:215,b:0},goldenrod:{r:218,g:165,b:32},gray:{r:128,g:128,b:128},green:{r:0,g:128,b:0},greenyellow:{r:173,g:255,b:47},grey:{r:128,g:128,b:128},honeydew:{r:240,g:255,b:240},hotpink:{r:255,g:105,b:180},indianred:{r:205,g:92,b:92},indigo:{r:75,g:0,b:130},ivory:{r:255,g:255,b:240},khaki:{r:240,g:230,b:140},lavender:{r:230,g:230,b:250},lavenderblush:{r:255,g:240,b:245},lawngreen:{r:124,g:252,b:0},lemonchiffon:{r:255,g:250,b:205},lightblue:{r:173,g:216,b:230},lightcoral:{r:240,g:128,b:128},lightcyan:{r:224,g:255,b:255},lightgoldenrodyellow:{r:250,g:250,b:210},lightgray:{r:211,g:211,b:211},lightgreen:{r:144,g:238,b:144},lightgrey:{r:211,g:211,b:211},lightpink:{r:255,g:182,b:193},lightsalmon:{r:255,g:160,b:122},lightseagreen:{r:32,g:178,b:170},lightskyblue:{r:135,g:206,b:250},lightslategray:{r:119,g:136,b:153},lightslategrey:{r:119,g:136,b:153},lightsteelblue:{r:176,g:196,b:222},lightyellow:{r:255,g:255,b:224},lime:{r:0,g:255,b:0},limegreen:{r:50,g:205,b:50},linen:{r:250,g:240,b:230},magenta:{r:255,g:0,b:255},maroon:{r:128,g:0,b:0},mediumaquamarine:{r:102,g:205,b:170},mediumblue:{r:0,g:0,b:205},mediumorchid:{r:186,g:85,b:211},mediumpurple:{r:147,g:112,b:219},mediumseagreen:{r:60,g:179,b:113},mediumslateblue:{r:123,g:104,b:238},mediumspringgreen:{r:0,g:250,b:154},mediumturquoise:{r:72,g:209,b:204},mediumvioletred:{r:199,g:21,b:133},midnightblue:{r:25,g:25,b:112},mintcream:{r:245,g:255,b:250},mistyrose:{r:255,g:228,b:225},moccasin:{r:255,g:228,b:181},navajowhite:{r:255,g:222,b:173},navy:{r:0,g:0,b:128},oldlace:{r:253,g:245,b:230},olive:{r:128,g:128,b:0},olivedrab:{r:107,g:142,b:35},orange:{r:255,g:165,b:0},orangered:{r:255,g:69,b:0},orchid:{r:218,g:112,b:214},palegoldenrod:{r:238,g:232,b:170},palegreen:{r:152,g:251,b:152},paleturquoise:{r:175,g:238,b:238},palevioletred:{r:219,g:112,b:147},papayawhip:{r:255,g:239,b:213},peachpuff:{r:255,g:218,b:185},peru:{r:205,g:133,b:63},pink:{r:255,g:192,b:203},plum:{r:221,g:160,b:221},powderblue:{r:176,g:224,b:230},purple:{r:128,g:0,b:128},red:{r:255,g:0,b:0},rosybrown:{r:188,g:143,b:143},royalblue:{r:65,g:105,b:225},saddlebrown:{r:139,g:69,b:19},salmon:{r:250,g:128,b:114},sandybrown:{r:244,g:164,b:96},seagreen:{r:46,g:139,b:87},seashell:{r:255,g:245,b:238},sienna:{r:160,g:82,b:45},silver:{r:192,g:192,b:192},skyblue:{r:135,g:206,b:235},slateblue:{r:106,g:90,b:205},slategray:{r:112,g:128,b:144},slategrey:{r:112,g:128,b:144},snow:{r:255,g:250,b:250},springgreen:{r:0,g:255,b:127},steelblue:{r:70,g:130,b:180},tan:{r:210,g:180,b:140},teal:{r:0,g:128,b:128},thistle:{r:216,g:191,b:216},tomato:{r:255,g:99,b:71},turquoise:{r:64,g:224,b:208},violet:{r:238,g:130,b:238},wheat:{r:245,g:222,b:179},white:{r:255,g:255,b:255},whitesmoke:{r:245,g:245,b:245},yellow:{r:255,g:255,b:0},yellowgreen:{r:154,g:205,b:50},transparent:{r:-1,g:-1,b:-1}},a="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor borderColor boxShadowColor color outlineColor textShadowColor".split(" ");b.color={normalize:function(o){var h,g,q,d,j,f,m=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,k=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,p=/rgb(?:a)?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(0*\.?\d+)\s*)?\)/,n=/rgb(?:a)?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(0*\.?\d+)\s*)?\)/,e=/hsl(?:a)?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(0*\.?\d+)\s*)?\)/;if(q=m.exec(o)){h={r:parseInt(q[1],16),g:parseInt(q[2],16),b:parseInt(q[3],16),source:q[0]}}else{if(q=k.exec(o)){h={r:parseInt(q[1]+q[1],16),g:parseInt(q[2]+q[2],16),b:parseInt(q[3]+q[3],16),source:q[0]}}else{if(q=p.exec(o)){h={r:parseInt(q[1],10),g:parseInt(q[2],10),b:parseInt(q[3],10),alpha:parseFloat(q[4],10),source:q[0]}}else{if(q=n.exec(o)){h={r:parseInt(q[1]*2.55,10),g:parseInt(q[2]*2.55,10),b:parseInt(q[3]*2.55,10),alpha:parseFloat(q[4],10),source:q[0]}}else{if(q=e.exec(o)){h=b.color.hsl_to_rgb(parseFloat(q[1],10)/100,parseFloat(q[2],10)/100,parseFloat(q[3],10)/100);h.alpha=parseFloat(q[4],10);h.source=q[0]}else{q=o.split(" ");for(j=0,f=q.length;j<f;j++){d=q[j];if(c[d]){break}}if(!c[d]){d="transparent"}h=c[d];h.source=d}}}}}if(!h.alpha&&h.alpha!==0){delete h.alpha}return h},hsl_to_rgb:function(f,o,e,k){var d,i,j,n,m;if(o===0){d=i=j=e}else{if(e<=0.5){m=e*(o+1)}else{m=(e+o)-(e*o)}n=(e*2)-m;d=parseInt(255*b.color.hue_to_rgb(n,m,f+(1/3)),10);i=parseInt(255*b.color.hue_to_rgb(n,m,f),10);j=parseInt(255*b.color.hue_to_rgb(n,m,f-(1/3)),10)}return{r:d,g:i,b:j,alpha:k}},hue_to_rgb:function(e,d,f){if(f<0){f++}if(f>1){f--}if((f*6)<1){return e+((d-e)*f*6)}else{if((f*2)<1){return d}else{if((f*3)<2){return e+((d-e)*((2/3)-f)*6)}else{return e}}}}};if(b.cssHooks){b.each(a,function(d,e){b.cssHooks[e]={set:function(f,g){g=b.color.normalize(g);if(!g.alpha){g.alpha=1}f.style[e]="rgba("+g.r+","+g.g+","+g.b+","+g.alpha+")"}};b.fx.step[e]=function(f){var g;if(!f.start||typeof f.start==="string"){if(!f.start){f.start=b.css(f.elem,e)}f.start=b.color.normalize(f.start);f.end=b.color.normalize(f.end);if(!f.start.alpha){f.start.alpha=1}if(!f.end.alpha){f.end.alpha=1}}b.style(f.elem,e,"rgba("+parseInt(f.start.r+(f.pos*(f.end.r-f.start.r)),10)+","+parseInt(f.start.g+(f.pos*(f.end.g-f.start.g)),10)+","+parseInt(f.start.b+(f.pos*(f.end.b-f.start.b)),10)+","+parseFloat(f.start.alpha+(f.pos*(f.end.alpha-f.start.alpha)))+")")}})}})(jQuery);
// jQuery TexTShadoW:
(function(e){var d="Color X Y Blur".split(" "),c=e.support,b=/\s/,f=document.createElement("div"),a=f.style;c.textShadow=(a.textShadow==="");f=null;if(e.cssHooks&&c.textShadow){e.each(d,function(g,j){var h="textShadow"+j;e.cssHooks[h]={get:function(l,k,i){return(function(o,q){var p=e.css(o,"textShadow"),m=e.color.normalize(p),n;if(q===0){n="rgb"+(m.alpha?"a":"")+"("+m.r+", "+m.g+", "+m.b+(m.alpha?", "+m.alpha:"")+")"}else{n=e.trim(p.replace(m.source,"")).split(b)[q-1]}return n})(l,g)},set:function(i,k){i.style.textShadow=(function(o,p,n){var l=e.style(i,"textShadowColor"),q=o.replace(l,"").split(b),m;if(n===0){l=p}else{q[n]=p}return l+q.join(" ")})(e.css(i,"textShadow"),k,g)}};if(g!==0){e.fx.step[h]=function(i){e.cssHooks[h].set(i.elem,i.now+i.unit)}}})}})(jQuery);
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment