Бесконечная бегущая горизонтальная строка контента на jQuery

Зачастую контент на вашем сайте велик и вам хочется уместить его на первом экране. Что ж, решение есть – это поместить его в бегущую строку.

Что такое бегущая строка? Это некая область, отведенная под контент, который в прямом смысле пробегает в этой области.

Что в нашем случае мы подразумеваем под «бесконечной»? Это значит, что если контент в строке закончится, то цикл прокрутки начнется заново, и так без остановки.

Реализация этой бегущей строки – следующая.

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

2. Перед закрывающим тегом </body> подключите скрипт:

<script src="/js/endless_scroll.js"></script>

<script>

	$(window).load(function () {
	
		$("#content").endlessScroll({ 
			width: "500px", // Ширина строки
			height: "30px", // Высота строки
			steps: -2, // Шаг анимации в пикселях. Если число отрицательное - движение влево, положительное - вправо
			speed: 50, // Скорость анимации (0 - максимальная)
			mousestop: true // Останавливать ли полосу при наведении мыши (да - true, нет - false)
		});
		
	});
	
</script>

И по желанию измените настройки. Не забывайте прописать корректный адрес до файла.

3. Далее в нужное место сайта вставьте ваш контент, обернутый в:

<div id="content">

	Ваш контент

</div>

Сохраните изменения, после чего наблюдайте желаемый результат.

В качестве бегущей строки могут быть как текст, так, например, и рекламные баннеры.

При наведении на строку она останавливается, для того чтобы можно быть рассмотреть или прочитать ее содержимое.