Бесконечная бегущая горизонтальная строка контента на 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>
Сохраните изменения, после чего наблюдайте желаемый результат.
В качестве бегущей строки могут быть как текст, так, например, и рекламные баннеры.
При наведении на строку она останавливается, для того чтобы можно быть рассмотреть или прочитать ее содержимое.