Rainbows.js

33 |

34 |

Make your site's text "pop" with a full rainbow treatment

35 |

Inspired by such excellent html tags as marquee and blink.

36 |

Include rainbows.js on your page and use the <rainbow /> tag to rainbow-ify everything.

37 |

38 |

39 | 40 |

41 |

42 |

Moderate speed, moderate size

43 |

44 | 45 |

Sed eu odio sit amet mauris placerat fringilla. Fusce vehicula justo vel lacus ultricies venenatis nec sollicitudin libero. Sed a vehicula leo. Fusce quis justo elit. Pellentesque lacinia accumsan elit ut vehicula. Vivamus id pretium libero. Proin nunc mauris, efficitur id mi pellentesque, ultricies posuere tellus. Nullam malesuada enim rhoncus molestie luctus.

46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ligula rhoncus, egestas magna ut, pretium urna. Cras eu mi vel ante tincidunt mollis et sit amet augue. Quisque dui felis, lacinia ac lacus accumsan, blandit aliquet tellus. In gravida, nunc vel sodales feugiat, lacus ex ornare arcu, sed dapibus est ante venenatis eros. In eleifend sapien quis aliquam ultricies. Phasellus rutrum, libero vitae accumsan pharetra, elit mauris fringilla lorem, placerat dictum nulla nulla nec augue. Pellentesque eget vehicula mauris, at dictum ligula. Curabitur ac sem mollis, convallis nisi sed, euismod magna. Sed tincidunt ex sapien, et efficitur leo vulputate nec. Aliquam imperdiet sem in augue maximus, at tristique sapien convallis. Integer imperdiet erat et tortor elementum, vel rhoncus ligula porta. Sed quis nisi metus.

48 | 49 |

Pellentesque nunc lorem, accumsan ut metus ac, tristique auctor augue. Morbi nec consectetur sapien, sit amet euismod purus. Ut vulputate vel magna a pellentesque. Maecenas lectus urna, semper et tincidunt nec, tincidunt non mauris. Pellentesque id ultrices erat, eu ultricies nulla. Vivamus semper rhoncus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam a lacus tellus. Ut non pulvinar turpis. Integer sed est odio. In sagittis, ligula id venenatis pulvinar, mi odio placerat erat, eget consectetur tortor ex vel metus. Sed vitae erat orci. Sed accumsan in urna eu imperdiet. In semper scelerisque odio ac ullamcorper.

50 | 51 | 52 | 53 |

<rainbow data-speed="2" data-size="10">...</rainbow>

54 | 55 |

56 | 57 |

58 |

59 |

Low speed, high size

60 |

61 | 62 |

63 | 64 |

65 | 66 |

67 | 68 | 69 | 70 |

<rainbow data-speed="0.25" data-size="25">...</rainbow>

71 | 72 |

73 | 74 |

75 |

76 |

High speed, low size

77 |

78 | 79 |

80 | 81 |

82 | 83 |

84 | 85 | 86 |

<rainbow data-speed="5" data-size="1">...</rainbow>

87 | 88 |

89 | 90 |

91 | 92 | 93 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /rainbows.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var $ = jQuery; 3 | 4 | /** 5 | * Rainbows class 6 | */ 7 | var Rainbows = function(container, speed, size) { 8 | this.container = $(container); 9 | this.speed = speed || 2; 10 | this.size = size || 15; 11 | return this.start(); 12 | }; 13 | 14 | Rainbows.prototype.wrap = function(target) { 15 | var self = this, 16 | target = $(target), 17 | new_target = $('

'), 18 | nodes = target.contents().clone(); 19 | 20 | nodes.each(function() { 21 | if (this.nodeType == 3) { // text 22 | var new_html = ""; 23 | text = this.wholeText; 24 | 25 | for (var i=0; i < text.length; i++) { 26 | if (text[i] == ' ') 27 | new_html += " "; 28 | else 29 | new_html += "" + text[i] + ""; 30 | } 31 | new_target.append(new_html); 32 | } else { 33 | $(this).html(self.wrap(this)); 34 | new_target.append(this); 35 | } 36 | }); 37 | 38 | return new_target.html(); 39 | }; 40 | 41 | Rainbows.prototype.guid = function() { 42 | var s4 = function() { 43 | return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); 44 | }; 45 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); 46 | }; 47 | 48 | Rainbows.prototype.generateCSS = function() { 49 | var style = ""; 83 | 84 | return style; 85 | } 86 | 87 | Rainbows.prototype.start = function() { 88 | if (this.container.length && typeof this.container.data('originalHTML') == 'undefined') { 89 | this.container.data('originalHTML', this.container.html()); 90 | this.container.html(this.wrap(this.container)); 91 | this.container.prepend(this.generateCSS()); 92 | } 93 | return this; 94 | }; 95 | 96 | Rainbows.prototype.stop = function () { 97 | this.container.html(this.container.data('originalHTML')); 98 | this.container.removeData('originalHTML'); 99 | this.container.removeData('rainbows'); 100 | this.container.attr('data-rainbow-id', null); 101 | return this; 102 | }; 103 | 104 | /** 105 | * If it seems safe, place Rainbows in global scope. 106 | */ 107 | if (typeof window.Rainbows == 'undefined') 108 | window.Rainbows = Rainbows; 109 | 110 | /** 111 | * As a jQuery plugin 112 | */ 113 | $.fn.rainbows = function(options) { 114 | var settings = $.extend({ 115 | speed: 2, 116 | size: 15 117 | }, (typeof options == 'object')? options : {}); 118 | 119 | return this.each(function(idx, el) { 120 | if (typeof $(el).data('rainbows') == 'undefined') { 121 | var speed = $(el).data('speed') || settings.speed, 122 | size = $(el).data('size') || settings.size; 123 | 124 | $(el).data('rainbows', new Rainbows(el, Number(speed), Number(size))); 125 | } 126 | 127 | if (['start', 'stop'].indexOf(options) >= 0) 128 | $(el).data('rainbows')[options](); 129 | }); 130 | }; 131 | 132 | /** 133 | * If there are any or tags, 134 | * rainbow-ify them on document ready. 135 | */ 136 | $(function() { $('rainbow, rainbows').rainbows(); }); 137 | }()); 138 | --------------------------------------------------------------------------------