Зачем нужна бегущая строка на сайте и как создать ее самостоятельно?
А все бегут, бегут! И строка бежит. Стоп! Какая строка бежит? Конечно же, бегущая и, конечно же, перед глазами пользователей на чужом сайте. И себе хотите такую? Не беда, сейчас научимся, как сделать бегущую строку самостоятельно.
Кто и куда бежит?
Под бегущей строкой подразумевается текст определенной длины, совершающий поступательное или равномерное движение в любую из сторон на определенной области страницы. Также возможны вариации на тему ритмичности движения текста в бегущей строке.
Бегущая строка для сайта была популярна еще несколько лет назад. Тогда ее использовали в качестве новостной ленты или для отображения рекламных текстов. Главной проблемой такой строки было ее постоянство, которое вскоре надоедало.
Речь о том, что для замены бегущего текста нужно было часто залазить в html код сайта и менять его на новый. Понятно, что сильно часто этого не делали.
Сейчас большая часть анимации в интернете создана с помощью технологии flash, и ползающий текст в веб-дизайне считается чуть ли не «винтажностью». Но все равно бегающие перед глазами слова не утратили своей первозданной красоты.
Бегущая строка может быть использована как вывеска для названия сайта или его раздела. Также она идеально подойдет для размещения какой-нибудь умной мысли, которая может стать еще одним способом привлечения внимания со стороны посетителей сайта.
Бегущая строка, написанная на html
Бегущая строка на сайте html – это самый легкий вариант ее реализации с широким диапазоном для творчества.
За движение текста в html отвечает тег <marquee>. Его синтаксис:
< marquee > текст </marquee >У этого тега много значений и атрибутов:
1) direction – устанавливает направление движения текста. Возможные значения атрибута:
- left- в правую сторону;
- right – влево;
- up – вверх;
- down – вниз;
2)behavior – отвечает за тип скроллинга. Принимаемые значения:
- scroll – движение текста в одном направлении;
- slide – одноразовое движение с последующей остановкой (всплывающий текст);
- alternate – в заданном направлении и назад.
3)loop – определяет количество циклов повторений. Возможные значения:
- infinite – бесконечное количество циклов (значение задано по умолчанию).
- Целое число.
4)scrollamount – задает скорость перемещения бегущей строки. Принимает целое значение.
5)width – задается длина области перемещения.
6)height – задается высота области перемещения.
7)scrolldelay – устанавливает время задержки между циклами в миллисекундах.
Остальные атрибуты тега являются общестилевыми для всех элементов языка гипертекста.
Тег был создан специально под браузер Internet Explorer. До недавнего времени его не воспринимали некоторые другие браузеры, но сейчас его видят все.
И если немного «поиграться» с кодом, то можно заставить двигаться не только текст, но и картинку. А это уже начальный уровень анимации, господа!
Вот код этого примера:
<marquee direction="up" behavior="scroll" scrollamount="2" scrolldelay="20" bgcolor="blue" width="700px" height="300px" style="color: #D9470D; font-size: 40px; font-weight: bolder">
<img src="bk.gif" />
Едрит-Мадрид! Куда меня несет!!!
</marquee>Бегущая строка для Joomla
Владельцам сайтов на основе CMS приведенный выше пример не подойдет. Точнее, подойдет, но нужно знать, куда можно «влепить» этот пример в html код. А это непросто.
Все CMS построены на основе php, который является серверным языком программирования. Именно на нем написан код, отвечающий за генерацию страниц сайта. То есть каждый элемент страницы сайта («подвал», «шапка») генерируется во время выполнения кода. Так что редактировать код php своего сайта на CMS не стоит.
Бегущая строка для joomla может быть реализована с помощью установки специальных плагинов. Один из них называется Moving Text. Рассмотрим его установку по шагам:
1. Заходим в панель управления Joomla. Через пункт верхнего меню «Расширения» переходим в «Менеджер расширений».
2. На вкладке менеджера «Установка» выбираем вариант загрузки и жмем на кнопку «Установить»:
3. Затем переходим в «Менеджер плагинов».
4. В списке внизу находим нужный плагин. Отмечаем его и нажимаем вверху на кнопку «Изменить». Рядом с ней находится кнопка «Включить», служащая для активации расширения:
5. В следующем окне в полях «Основные параметры» устанавливаем параметры отображения бегущей строки (длина, скорость и интервал между циклами). После внесения изменений не забудьте нажать на кнопку «Сохранить» (вверху справа).
6. Затем через пункт главного меню «Материалы» переходим в «Менеджер материалов». В нижнем списке отмечаем галочкой нужный материал и жмем на кнопку «Изменить» (кружок с карандашом).
7. В редакторе жмем на кнопку «html». На экране откроется окно редактора кода. Туда вставляем { text=Нужный текст }. Вместо «Нужный текст» пишем то, что нам нужно, и жмем на «Обновить»:
После этого в редактируемом материале появится бегущая строка:
Другие варианты реализации бегущей строки
Бегущий текст можно реализовать не только с помощью html и установкой плагинов. Неплохим считается вариант реализации на javascript. Вот пример его действия:
Вот кусок кода, который размещается в теге <head>:
<SCRIPT LANGUAGE='JavaScript'>
function outmsg(msg,ctrlwidth)
{
msg = " --- "+msg
newmsg = msg
while (newmsg.length < ctrlwidth) {newmsg += msg}
document.write ('<FORM NAME="Outmsg">')
document.write ('<CENTER><INPUT NAME="outmsg" VALUE= "'+newmsg+'" SIZE= '+ctrlwidth+'></CENTER>')
document.write ('</FORM>')
rollmsg()
}
function rollmsg()
{
NowMsg=document.Outmsg.outmsg.value
NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
document.Outmsg.outmsg.value = NowMsg
bannerid=setTimeout("rollmsg()",100)
}
</SCRIPT>А вот кусок скрипта, который нужно поместить в месте отображения бегущей строки:
<SCRIPT language='JavaScript'>
outmsg("Вы видите строку! Она бежит! УРА!!!",70)
</script>Также можно реализовать бегающий текст с помощью библиотеки jquery:
Код примера приведен полностью. При желании css, jquery и html можно разнести по отдельным файлам:
<html>
<head>
<title> </title>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ru"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var marquee = $("#marquee");
marquee.css({"overflow": "hidden", "width": "100%"});
// оболочка для текста в виде span (IE не любит дивы с inline-block)
marquee.wrapInner("<span>");
marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" });
marquee.append(marquee.find("span").clone()); // тут у нас два span с текстом
marquee.wrapInner("<div>");
marquee.find("div").css("width", "200%");
var reset = function() {
$(this).css("margin-left", "0%");
$(this).animate({ "margin-left": "-100%" }, 12000, 'linear', reset);
};
reset.call(marquee.find("div"));
});
</script>
<style type="text/css">
.string{
width:600px;
height:30px;
margin:60px auto;
line-height:28px;
padding: 0 10px;
border-radius:4px;
box-shadow:0 1px 2px #777;
-moz-border-radius:4px;
-webkit-border-radius:4px;
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
}
</style>
</head>
<body>
<div class="string">
<div id="marquee">Строка с текстом для показа какого-нибудь важного объявления на сайте.</div>
</div>
</body>
</html>Что в итоге?
Как видно из примеров, из всех реализаций бегущей строки самым «легковесным» является вариант на html. Да и его функционал намного проще для понимания и освоения. Но такая реализация не подойдет для сайтов на CMS. Для них остаются лишь плагины.
Выбор за вами!