Ticker

HTML

<div class="strip">Thank You</div>

CSS

.strip {
  position: absolute;
  top: 100px;
  left: 0;
  display: none;
  font-size: 20px;
  white-space: nowrap;
  letter-spacing: -2px;
}

.strip DIV {
  position: absolute;
  top: 0;
  left: 0;
}



/*
.a {
  background-color: yellow;
}
.b {
  background-color: orange;
}
*/

JavaScript

var Site        = Site || {};

Site.$Body = $('BODY');
Site.$Window = $(window);

Site.TickerTape = function($) {

//    var view            = $(this);
	var view 	= $('.strip');
    var speed 	= 15000;
    var padding = 90;

	var text;
    var width;
    
    var stop = function() {
    	view.stop();
    };	
    
	var loop = function() {
		view.fadeIn({queue: false, duration: 2000});
		view.css({left: 0}).animate({ left: -(width) }, 15000, 'linear', loop);
	};    


    // ---

	var create = function() {
    
    	var texts;
    	var count = 2;
        
        // If it's running, we need to stop it.
        stop();
        // And clear out the container.
        view.html('');
	
    	// Figure out how many instances of the text we need. Always one extra in order for loop to be seamless.
	    if (width < Site.$Window.width()) {
        	count = Math.ceil(Site.$Window.width() / width) + 1;
        }
        
        // Generate the text elements with offsets and add to the view.
        for (var i = 0; i < count; ++ i) {

			view.append(
            	$('<div/>').css({width: width, left: (width*i)}).html(text)
               	);
    
        }
        
    	// Ok get movin'
        loop();
    
    };

	// ---

    var init                 = (function() {
    
		// Store the distance we need to move for each animation loop, we'll need it if resize triggers a new re-draw.
		width = Math.floor(view.width()) + padding;
        
        // Store the ticker text
        text = view.text();
        
        // External Listeners
		Site.$Body.on('TickerTape:stop', stop);
		Site.$Body.on('TickerTape:run', loop);

		// GO!
		// Create the ticker, then on resize recalculate the contents.
		create();        
        // Window.resize( $.debounce( 250, create ));

    })(); 

};








$('BUTTON.stop').click(function() {
    Site.$Body.trigger('TickerTape:stop');
});
$('BUTTON.run').click(function() {
    Site.$Body.trigger('TickerTape:run');
});

Site.TickerTape(jQuery);