«M. Weather» – бесплатный бот-информер погоды «ВКонтакте»
283 просм
0 комм
Поделиться:

Бесконечная бегущая горизонтальная строка контента на 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>

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

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

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

ФайлРазмерСсылка
0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария