Помните раньше был такой тэг в HTML, который позволял делать бегущую строку на странице. Он назывался marquee, и по полезности конкурировал с пресловутым blink. Со временем этот тэг был удален из спецификации HTML,  и теперь далеко не все браузеры его поддерживают.

Реализация этого эффекта до смешного простая, нужно всего лишь обвернуть содержимое нужного элемента тэгом nobr, для того, чтобы содержимое не переносилось со строки на строку, и анимаровать движение этого эелемента nobr влево и вправо.

Вот чего мы добиваемся (бегущая строка на jQuery):



Помните раньше был такой тэг в HTML, который позволял делать бегущую строку на странице. Он назывался marquee, и по полезности конкурировал с пресловутым blink. Со временем этот тэг был удален из спецификации HTML,  и теперь далеко не все браузеры его поддерживают.

С точки зрения CSS у элемента контейнера должно быть установлено относительное позиционирование и скрывание «невлезающих» частей содержимого:

.container{
overflow-x: hidden;
position: relative;
}

Вообще говоря, относительное позиционирование не обязательно, но оно удерживает прокручивающуюся строку текста в рамках исходного объекта.

С точки jQuery мы просто обворачиваем содержимое блока в тэг nobr, присваиваем ему абсолютное позиционирование и начальные координаты, а потом начинаем анимировать прокрутку влево, а дойдя до конца в обратном направлении.

При этом еще учитываем задержку при смене направления анимации, и скорость анимации.

var speedlimit=1500;
var scrolldelay=500;
var scrollforward=function(w,wc,speed){
			$('#roller nobr').delay(scrolldelay).animate({left:-(w-wc)},speed,function(){scrollbackward(w,wc,speed);});
}
var scrollbackward=function(w,wc,speed){
			$('#roller nobr').delay(scrolldelay).animate({left:0},speed,function(){
			scrollforward(w,wc,speed);
			});
}
	$(function(){
		$('#roller').html(''+$('#roller').html()+'');
		$('#roller nobr').css({position:'absolute',left:0,top:0});
		var width=$('#roller nobr').width();
		var widthContainer=$('#roller').width();
		var speed=speedlimit*(width/widthContainer);
		if(width>widthContainer){
			scrollforward(width,widthContainer,speed);
		}
	});

Здесь функции scrollforward и scrollbackward — это функции анимации. Одна из них с заданной скоростью прокручивает текст влева, а другая вправо. Они связаны между собой при помощи функции callback.

Если разбираться в коде лень, то проще всего воспользоваться готовым плагином на jQuery: marquee jQuery plugin.

На странице плагина можно увидеть демо его работы, и подробную инструкцию по установке и запуску, все это решается при помощи 3-х строчек кода.