1/* =========================================================== 2 * jquery-simple-text-rotator.js v1 3 * =========================================================== 4 * Copyright 2013 Pete Rojwongsuriya. 5 * http://www.thepetedesign.com 6 * 7 * A very simple and light weight jQuery plugin that 8 * allows you to rotate multiple text without changing 9 * the layout 10 * https://github.com/peachananr/simple-text-rotator 11 * 12 * ========================================================== */ 13 14!function($) { 15 16 var defaults = { 17 animation: 'dissolve', 18 separator: ',', 19 speed: 2000, 20 }; 21 22 $.fx.step.textShadowBlur = function(fx) { 23 $(fx.elem). 24 prop('textShadowBlur', fx.now). 25 css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px black'}); 26 }; 27 28 $.fn.textrotator = function(options) { 29 var settings = $.extend({}, defaults, options); 30 31 return this.each(function() { 32 var el = $(this); 33 var array = []; 34 $.each(el.text().split(settings.separator), function(key, value) { 35 array.push(value); 36 }); 37 el.text(array[0]); 38 39 // animation option 40 var rotate = function() { 41 switch (settings.animation) { 42 case 'dissolve': 43 el.animate({ 44 textShadowBlur: 20, 45 opacity: 0, 46 }, 500, function() { 47 index = $.inArray(el.text(), array); 48 if ((index + 1) == array.length) index = -1; 49 el.text(array[index + 1]).animate({ 50 textShadowBlur: 0, 51 opacity: 1, 52 }, 500); 53 }); 54 break; 55 56 case 'flip': 57 if (el.find('.back').length > 0) { 58 el.html(el.find('.back').html()); 59 } 60 61 var initial = el.text(); 62 var index = $.inArray(initial, array); 63 if ((index + 1) == array.length) index = -1; 64 65 el.html(''); 66 $('<span class=\'front\'>' + initial + '</span>').appendTo(el); 67 $('<span class=\'back\'>' + array[index + 1] + '</span>'). 68 appendTo(el); 69 el.wrapInner('<span class=\'rotating\' />'). 70 find('.rotating'). 71 hide(). 72 addClass('flip'). 73 show(). 74 css({ 75 '-webkit-transform': ' rotateY(-180deg)', 76 '-moz-transform': ' rotateY(-180deg)', 77 '-o-transform': ' rotateY(-180deg)', 78 'transform': ' rotateY(-180deg)', 79 }); 80 81 break; 82 83 case 'flipUp': 84 if (el.find('.back').length > 0) { 85 el.html(el.find('.back').html()); 86 } 87 88 var initial = el.text(); 89 var index = $.inArray(initial, array); 90 if ((index + 1) == array.length) index = -1; 91 92 el.html(''); 93 $('<span class=\'front\'>' + initial + '</span>').appendTo(el); 94 $('<span class=\'back\'>' + array[index + 1] + '</span>'). 95 appendTo(el); 96 el.wrapInner('<span class=\'rotating\' />'). 97 find('.rotating'). 98 hide(). 99 addClass('flip up'). 100 show(). 101 css({ 102 '-webkit-transform': ' rotateX(-180deg)', 103 '-moz-transform': ' rotateX(-180deg)', 104 '-o-transform': ' rotateX(-180deg)', 105 'transform': ' rotateX(-180deg)', 106 }); 107 108 break; 109 110 case 'flipCube': 111 if (el.find('.back').length > 0) { 112 el.html(el.find('.back').html()); 113 } 114 115 var initial = el.text(); 116 var index = $.inArray(initial, array); 117 if ((index + 1) == array.length) index = -1; 118 119 el.html(''); 120 $('<span class=\'front\'>' + initial + '</span>').appendTo(el); 121 $('<span class=\'back\'>' + array[index + 1] + '</span>'). 122 appendTo(el); 123 el.wrapInner('<span class=\'rotating\' />'). 124 find('.rotating'). 125 hide(). 126 addClass('flip cube'). 127 show(). 128 css({
129 '-webkit-transform': ' rotateY(180deg)', 130 '-moz-transform': ' rotateY(180deg)', 131 '-o-transform': ' rotateY(180deg)', 132 'transform': ' rotateY(180deg)', 133 }); 134 135 break; 136 137 case 'flipCubeUp': 138 if (el.find('.back').length > 0) { 139 el.html(el.find('.back').html()); 140 } 141 142 var initial = el.text(); 143 var index = $.inArray(initial, array); 144 if ((index + 1) == array.length) index = -1; 145 146 el.html(''); 147 $('<span class=\'front\'>' + initial + '</span>').appendTo(el); 148 $('<span class=\'back\'>' + array[index + 1] + '</span>'). 149 appendTo(el); 150 el.wrapInner('<span class=\'rotating\' />'). 151 find('.rotating'). 152 hide(). 153 addClass('flip cube up'). 154 show(). 155 css({ 156 '-webkit-transform': ' rotateX(180deg)', 157 '-moz-transform': ' rotateX(180deg)', 158 '-o-transform': ' rotateX(180deg)', 159 'transform': ' rotateX(180deg)', 160 }); 161 162 break; 163 164 case 'spin': 165 if (el.find('.rotating').length > 0) { 166 el.html(el.find('.rotating').html()); 167 } 168 index = $.inArray(el.text(), array); 169 if ((index + 1) == array.length) index = -1; 170 171 el.wrapInner('<span class=\'rotating spin\' />'). 172 find('.rotating'). 173 hide(). 174 text(array[index + 1]). 175 show(). 176 css({ 177 '-webkit-transform': ' rotate(0) scale(1)', 178 '-moz-transform': 'rotate(0) scale(1)', 179 '-o-transform': 'rotate(0) scale(1)', 180 'transform': 'rotate(0) scale(1)', 181 }); 182 break; 183 184 case 'fade': 185 el.fadeOut(settings.speed, function() { 186 index = $.inArray(el.text(), array); 187 if ((index + 1) == array.length) index = -1; 188 el.text(array[index + 1]).fadeIn(settings.speed); 189 }); 190 break; 191 } 192 }; 193 setInterval(rotate, settings.speed); 194 }); 195 }; 196 197}(window.jQuery); 198 199
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.