Генератор CSS-свойства «border-radius»   •   Online-инструменты
2 256 просм
1 комм
Поделиться:

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

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

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

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

ФайлРазмерСсылка
1
комментарий
Влад
16.12 в 07:17
Демок не хватает. А вот дождик, в предыдущем посте, на некоторых сайтах не работает, точнее на моём, я особо не всматривался, может стили, классы совпадают, но просто так скопировать и вставить, работать не будет. Своим присутствием, не позволяет контенту сайта загрузиться ,может ад блок хз. И этот ползунок подсказка, очень напрягает, и отвлекает от самого сайта. Было бы лучше, сделать для нее закрытие по кукам, иначе сайт хочется покинуть, из за не удобности - Мешает печатать, копировать ,отвлекает.
  • 1
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.