Разбираемся, как сделать бегущую строку на сайте

21 января 2015 Антон Кулешов 2116 0

Если у вас бурно развивающийся блог или информационный сайт, и новые посты появляются довольно часто, то пользователю необходимо как-то сообщать о наиболее важных и «горячих» новостях. Использовать модные ныне слайдеры не совсем для этого удобно, поэтому сегодня мы поговорим о том, как сделать бегущую строку на сайте. Для этого мы используем очень простой плагин на jQuery.

Реклама

Подключаем наш скрипт, библиотеку jQuery и стили к нему, сразу оговорюсь, бегущая строка – это не только слова и фразы, выкидывать в нее можно все, что угодно, поэтому не бойтесь экспериментировать. CSS файл во вложении – всего лишь простейший пример.

<link href="li-scroller.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.li-scroller.js" type="text/javascript"></script>

Далее создаем обычный список:

<ul id="ticker-1">
	<li>
		<span>10/10/2007</span>
		<a href="#">
			The first thing ...
		</a>
	</li>
	<li>
		<span>10/10/2007</span>
		<a href="#">
			End up doing is ...
		</a>
	</li>
	<li>
		<span>10/10/2007</span>
		<a href="#">
			The code that you ...
		</a>
	</li>
</ul>

Прокручиваться у нас будут элементы li, которые находятся внутри списка ul с id=ticker-1, поэтому, как я уже и говорил, внутрь li кладем все, что хотим. В нашем случае, просто строка с датой и сама новость, оформленная ссылкой.

Вызываем нашу функцию:

$("ul#ticker-1").liScroll({
	travelocity: 0.15
});

Как видим, плагин имеет всего лишь один необязательный параметр travelocity, который отвечает за скорость элементов в бегущей строке. Можно его не указывать, тогда скорость установится заданной по умолчанию – 0.07:

Вот такой вот простой плагин для реализации бегущей строки. В заключении хотел бы посоветовать: используйте бегущую строку только там, где она действительно нужна. Если у вас на сайте нет валового потока новостей, по 10-15 событий в день, то данный плагин вам попросту не нужен.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Прелоадер с SVG анимацией

8 ноября 2015 Антон Кулешов

Мы живём в эпоху, когда в интернете можно делать все: работать, отдыхать, играть, покупать и продавать, «готовить» еду, заниматься сексом и т.д.. Стандартный рабочий софт так же перекочевал онлайн. Практически любое приложение, будь то графический редактор, читалка-распознавала, просто удобный блокнот, давно обзавелись своей облачной версией. Ну что же, рядовому веб разработчику не гоже отставать от современных тенденций, и если вы решили обзавестись своим онлайн сервисом, то вам просто не обойтись без прелоадера.

Файл «robots.txt» – версия Яндекс

3 июля 2015 ti1schweiger

Всем добра! Возможно, сегодня я не скажу ничего нового, и вся изложенная ниже информация находится в свободном доступе в Помощи Яндекса, но, как показывает практика, очень мало людей ею пользуется, да и вообще задумывается о её существовании. Поэтому, дабы развеять сумрак над тем, что же все-таки должно быть написано в robots.txt, я приведу здесь материалы из Помощи Яндекса со своими личными комментариями.

Гистограммы и не только

8 сентября 2015 Антон Кулешов

Порой на ресурсе приходится отобразить какие-либо статистические данные: будь то сводная диаграмма из нескольких метрик, статистика для геймеров, биржевая сводка и многое другое. Ранее все решалось до боли просто: мы строили нужный график в таблицах excel, а затем, в виде картинки, помещали его у себя на сайте, но что делать, если необходимо подкорректировать данные или они обновляются, скажем, каждые 10 минут? Искать раба? Ну, уж нет, для построения графиков прямо на сайте есть более эффективные методы, и сегодня мы рассмотрим библиотеку morris.