|
|
| Line 15: |
Line 15: |
| | <body> | | <body> |
| | <div id="content2"> <span id="bounceTest">this text</span> </div> | | <div id="content2"> <span id="bounceTest">this text</span> </div> |
| - | <script>
| |
| - | $.fn.bouncyText = function() {
| |
| - |
| |
| - |
| |
| - | /* ----------------------
| |
| - | | PREP - exit if Chrome or Safari. Run only on text nodes of nodes, so don't interfere with other stuff inside $(this). Convert spaces
| |
| - | | to  's. Make clone of element so spacing maintained when text is turned into position absolute
| |
| - | ---------------------- */
| |
| - |
| |
| - | if (navigator.appVersion.indexOf('Chrome') != -1 || navigator.appVersion.indexOf('Safari') != -1) return;
| |
| - | var ac = arguments.callee;
| |
| - | $(this).html($(this).html().replace(/ /g, ' '));
| |
| - | $(this).clone().css('visibility', 'hidden').insertAfter($(this));
| |
| - | var textNodes = $(this).contents().filter(function() { return this.nodeType == 3; });
| |
| - | if (textNodes.length == 0) { return; }
| |
| - |
| |
| - |
| |
| - | /* ----------------------
| |
| - | | MAIN
| |
| - | ---------------------- */
| |
| - |
| |
| - | ac.main = function(textNode) {
| |
| - |
| |
| - |
| |
| - | //wrap text node in master span and break each char within it into its own DIV, so can be individually targeted for effects
| |
| - | //border looks pointless but position in some browsers is odd without it!
| |
| - |
| |
| - | var thisTN_newHTML = $('<span>').css('border', 'solid 1px transparent').addClass('bouncyText_wordContainer').css({position: 'relative'});
| |
| - | for(var i=0; i<textNode.text().length; i++) thisTN_newHTML.append(function() {
| |
| - | return $('<div>').text(textNode.text().substr(i, 1));
| |
| - | });
| |
| - | textNode.after(thisTN_newHTML).remove();
| |
| - |
| |
| - |
| |
| - | //treat each char DIV so it's ready for effect code but so letters are still next to each other. Spaces need to be >
| |
| - |
| |
| - | var thisTN_widthSoFar = 0;
| |
| - | thisTN_newHTML.children().each(function() {
| |
| - | $(this).css({position: 'absolute', top: 0, left: 0});
| |
| - | var thisCharLeft = $(this).index() != 0 ? thisTN_widthSoFar : 0;
| |
| - | $(this).css('left', thisCharLeft);
| |
| - | $(this).get(0).poo = thisCharLeft;
| |
| - | thisTN_widthSoFar += $(this).width();
| |
| - | });
| |
| - |
| |
| - |
| |
| - | //now run effects on letters at random
| |
| - |
| |
| - | setInterval(function() {
| |
| - | if (ac.main.stop) return;
| |
| - | var charNode = $(thisTN_newHTML).children(':eq('+Math.floor(Math.random()*($(thisTN_newHTML).children().length-1))+')');
| |
| - | charNode.effect('bounce', null, null, function() {
| |
| - | if ($(this).parent().is('.ui-effects-wrapper')) {
| |
| - | var this_clone = $(this).clone();
| |
| - | var this_closestWordContainer = $(this).closest('.bouncyText_wordContainer');
| |
| - | $(this).parentsUntil('.bouncyText_wordContainer').remove();
| |
| - | this_closestWordContainer.append(this_clone);
| |
| - | }
| |
| - | })
| |
| - | }, 1000);
| |
| - |
| |
| - |
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ----------------------
| |
| - | | ITERATE over text nodes and hit main func for each
| |
| - | ---------------------- */
| |
| - |
| |
| - | textNodes.each(function() { ac.main($(this)); });
| |
| - |
| |
| - |
| |
| - | }
| |
| - | </script>
| |
| - | <script>
| |
| - | $(function() { $('#bounceTest').bouncyText(); })
| |
| - | </script>
| |
| | | | |
| | </body> | | </body> |
"
