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

21 января 2015 Антон Кулешов 2141 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
Читайте далее

Как прижать футер к низу страницы

25 июля 2014 Антон Кулешов

В этой статье я расскажу о том, как прижать подвал сайта к низу страницы так, чтобы при масштабировании он оставался на своём месте и никуда не прыгал. Это не особо сложная задача, но у новичка, который только начал изучать HTML и CSS могут возникнуть с этим трудности.

Работа с API Яндекс Метрикой

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

Недавно один пользователь «ВКонтакте» задал мне вопрос: как получить Яндекс токен для работы с API Метрикой? Проблема, по своей сути, не вызывает сложностей, хотя на тот момент я не мог дать исчерпывающего ответа. На поиск решения у «неподготовленного» читателя может уйти весьма продолжительный промежуток времени. В этой статье я рассмотрю простой пример работы с API Яндекс Метрикой и подробно распишу все этапы.

Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте

9 марта 2016 Антон Кулешов

На сегодняшний день, мы обладаем уникальной возможностью – отслеживать многочисленные потоки информации и сохранять важный контент у себя на интернет страницах. В один клик регистрироваться и авторизоваться на сайтах и различных сервисах. Уже не проблема быть в курсе различных и разносторонних новостей из разных сфер жизни или оставаться на связи со своими близкими и знакомыми. Мы стали пользователями многочисленных социальных сетей и обладателями личных страниц с индивидуальными номерами, которые хранят срез наших интересов. Посещая магазины в интернете и сайты с товарами, мы с лёгкостью можем подарить лишнюю информацию о себе, не заполнив при этом ни одной формы. Для продавца каждый из нас потенциальный клиент, и он хочет знать, кто к нему зашёл на сайт и по какому запросу. И это возможно - мы сами можем вручить свой уникальный идентификатор (id) профиля в социальной сети даже не заметив этого, что даст продавцу больше шансов впарить свой товар. Достигается это путем использования разновидности кликджекинга, так называемого соцфишинга, об этом сегодняшняя статья.