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

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

21 января 2015 4058 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