1 2/* * * * * * * * * * * * * * * * * * * * * * * 3 * textition.js v1.0.2 4 * https://github.com/dimajt/textition.js 5 * Dima Karpov (c) 2013 6 * * * * * * * * * * * * * * * * * * * * * * */ 7 8(function($) { 9 $.fn.textition = function(options) { 10 11 12 13 // ---------------- 14 // VARS 15 // --------------- 16 17 // options 18 var data = $.extend({ 19 map: { 20 x: 100, 21 y: 50, 22 z: 1000 23 }, 24 speed: 1, 25 animation: 'ease', 26 handler: 'click', 27 perspective: 300, 28 autoplay: false, 29 interval: 3, 30 element: this 31 }, options); 32 33 34 // vars 35 var div = this, 36 child = this.children(), 37 letters, 38 index = 0, 39 position = {}, 40 playing; 41 42 43 44 // ---------------- 45 // UTILITY 46 // --------------- 47 48 // filter text 49 var filter = function(val) { 50 switch(val) { 51 case ' ': 52 return ' ' 53 54 default: 55 return val 56 } 57 } 58 59 // get position 60 var getPosition = function() { 61 var span = child.first(); 62 position.top = span.offset().top - div.offset().top; 63 position.left = span.offset().left - div.offset().left; 64 position.width = span.width(); 65 } 66 67 68 // random distance 69 var val = function(val) { 70 return Math.round(Math.random() * val) - val / 2; 71 } 72 73 74 75 // ---------------- 76 // BIND 77 // --------------- 78 79 // hide letters 80 var hide = function() { 81 var x = 0, y = 0, z = 0; 82 for (var i in data.map) { 83 switch(i) { 84 case 'x': 85 x = val(data.map.x) 86 break 87 case 'y': 88 y = val(data.map.y) 89 break 90 case 'z': 91 z = val(data.map.z) 92 break 93 } 94 } 95 $(this).css({ 96 '-webkit-transform': 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)', 97 '-moz-transform': 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)', 98 '-ms-transform': 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)', 99 '-o-transform': 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)', 100 'transform': 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)' 101 }); 102 } 103 104 // disappear 105 var disappear = function(span) { 106 $(span) 107 .css('opacity', 0) 108 .children() 109 .each(hide); 110 111 index++; 112 if (index > child.length - 1) { 113 index = 0; 114 } 115 } 116 117 // show 118 var show = function() { 119 $(this).css({ 120 '-webkit-transform': 'translate3d(0px, 0px, 0px)', 121 '-moz-transform': 'translate3d(0px, 0px, 0px)', 122 '-ms-transform': 'translate3d(0px, 0px, 0px)', 123 '-o-transform': 'translate3d(0px, 0px, 0px)', 124 'transform': 'translate3d(0px, 0px, 0px)' 125 }); 126 } 127 128 // appear 129 var appear = function(span) { 130 $(span) 131 .css('opacity', 1) 132 .children() 133 .each(show); 134 } 135 136 137 // run 138 var run = function(e) { 139 if (data.autoplay && e && !e.isTrigger) { 140 clearInterval(playing) 141 playing = setInterval(play, data.interval * 1000); 142 } 143 disappear(child[index]); 144 appear(child[index]); 145 } 146 147 148 // ---------------- 149 // CSS 150 // --------------- 151 152 153 // child style 154 var childStyle = function() { 155 $(this).css({ 156 '-webkit-transform-style': 'preserve-3d', 157 '-moz-transform-style': 'preserve-3d', 158 '-ms-transform-style': 'preserve-3d', 159 '-o-transform-style': 'preserve-3d', 160 'transform-style': 'preserve-3d', 161 '-webkit-transition': 'opacity ' + data.speed + 's ' + data.animation, 162 '-moz-transition': 'opacity ' + data.speed + 's ' + data.animation, 163 '-ms-transition': 'opacity ' + data.speed + 's ' + data.animation, 164 '-o-transition': 'opacity ' + data.speed + 's ' + data.animation, 165 'transition': 'opacity ' + data.speed + 's ' + data.animation, 166 'position': 'absolute', 167 'display': 'block', 168 'width': position.width, 169 'left': position.left, 170 'top': position.top 171 }); 172 } 173 174 175 // div style 176 var divStyle = function() { 177 var pos = div.css('position'); 178 div.css({ 179 '-webkit-perspective': data.perspective + 'px', 180 '-moz-perspective': data.perspective + 'px',
181 '-ms-perspective': data.perspective + 'px', 182 '-o-perspective': data.perspective + 'px', 183 'perspective': data.perspective + 'px', 184 'position': (pos === 'static') ? 'relative' : pos, 185 'height': div.height(), 186 'width': div.width() 187 }); 188 } 189 190 191 // letter style 192 var letterStyle = function() { 193 $(this).css({ 194 '-webkit-transition': '-webkit-transform ' + data.speed + 's ' + data.animation, 195 '-moz-transition': '-moz-transform ' + data.speed + 's ' + data.animation, 196 '-ms-transition': '-ms-transform ' + data.speed + 's ' + data.animation, 197 '-o-transition': '-o-transform ' + data.speed + 's ' + data.animation, 198 'transition': 'transform ' + data.speed + 's ' + data.animation, 199 'display': 'inline-block' 200 }) 201 } 202 203 204 205 // ---------------- 206 // INITIALIZATION 207 // --------------- 208 209 210 // create letters 211 var createLetters = function() { 212 213 var span = $(this); 214 var text = span.text(); 215 var code = ''; 216 217 for (var i = 0; i < text.length; i++) { 218 code += '<l>' + filter(text[i]) + '</l>'; 219 } 220 span.html(code); 221 } 222 223 // draw 224 var draw = function() { 225 var other = child.not(':first'); 226 other.hide().css('opacity', 0); 227 228 divStyle(); 229 child.each(createLetters); 230 child.each(childStyle); 231 232 letters = div.find('l'); 233 letters.each(letterStyle); 234 other.show().children().each(hide); 235 } 236 237 // play 238 var play = function() { 239 run(); 240 } 241 242 243 // init 244 var init = function() { 245 var time = new Date(); 246 getPosition(); 247 draw(); 248 249 if (data.handler) { 250 data.element.bind(data.handler, run); 251 } 252 253 if (data.autoplay) { 254 playing = setInterval(play, data.interval * 1000); 255 } 256 } 257 258 259 // Run 260 init(); 261 262 } 263})(jQuery)
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.