body{ font-family: 'Oswald', sans-serif; font-size: 16px; line-height: 120%; background: #f3f3f3; padding: 5%; } .ticker { position: relative; padding: 10px 10px; padding-left: 30px; background: #FF0000; overflow: hidden; a{ position: relative; top: 0; white-space: nowrap; width: auto; color: #ffffff; text-decoration: none; } &:before{ content: 'BREAKING NOW:'; position: absolute; left: 0; top: 0; display: block; padding: 10px 10px; background: #242526; z-index: 9; color: #FFF; } } $(document).ready(function() { var block_arr = $('.ticker li a').map(function() { return $(this).get(0);}).toArray(); var ticker_item = $(block_arr[0]); $(".ticker").html(ticker_item); var ticker_width = $(".ticker").width(); var text_x = ticker_width; scroll_ticker = function() { text_x--; ticker_item.css("left", text_x); if (text_x < -1 * ticker_item.width()) { ticker_item = $(block_arr[(block_arr.indexOf(ticker_item.get(0)) + 1 == block_arr.length) ? 0 : block_arr.indexOf(ticker_item.get(0)) + 1]); ticker_item.css("left", text_x); $(".ticker").html(ticker_item); text_x = ticker_width; } } var timer = setInterval(scroll_ticker, 15); $('.ticker').hover(function(ev){ clearInterval(timer); }, function(ev){ timer = setInterval( scroll_ticker, 15); }); });