PushText example

by soulwire

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="my-text"></div>
<button id="btn">Another</button>

CSS

#my-text {
    font-size: 36px;
    color: #333;
}

#my-text .old {
    color: #ccc;
}

JavaScript

// The PushText jQuery plugin
// Requires jQuery, jquery-easing

(function($){
    
    $.fn.extend({
        
        pushText: function( params ) {
            
            var defaults = {
                duration: 1000,
                easing:   'easeOutQuint',
                ratio:    0.555,
                text:     ''
            };
            
            var options = $.extend( defaults, params );
            
            return this.each(function(){
                
                var $this = $(this),
                        $span = $('<span>').addClass('old'),
                        timer = { progress: 0.0 },
                        prev  = $this.text(),
                        rInv  = 1.0 / options.ratio,
                        text  = options.text.toString(),
                        textA = '',
                        textB = '';
                        
                $(timer).animate({
                    progress: 1.0
                },{
                    duration: options.duration,
                    step: function() {
                        
                        textA = text.substr(0, Math.round(text.length * timer.progress * rInv));
                        textB = prev.substr(Math.round(prev.length * timer.progress));
                        
                        $span.text( textB );
                        $this.text( textA ).append( $span );
                        
                    },
                    easing: 'easeOutQuint'
                });
                
            });
            
        }
        
    });
    
})(jQuery);

// Example usage

// Some phrases to select
var PHRASES = [
    'The computing scientist’s main challenge is not to get confused by the complexities of his own making.',
    'One of my most productive days was throwing away 1000 lines of code',
    'When in doubt, use brute force',
    'Deleted code is debugged code',
    'Controlling complexity is the essence of computer programming',
   ...