А всі біжать, біжать! І рядок біжить. Стоп! Яка рядок біжить? Звичайно ж, біжить і, звичайно ж, перед очима користувачів на чужому сайті. І собі хочете таку? Не біда, зараз навчимося, як зробити біжучий рядок самостійно.
Хто і куди біжить?
Під біжучим рядком розуміється текст певної довжини, що здійснює поступальний або рівномірний рух в будь-яку з сторін на певній галузі сторінки. Також можливі варіації на тему ритмічності руху тексту в рухомому рядку.
Звучить нудно, але виглядає набагато веселіше.
Біжучий рядок для сайту була популярна ще кілька років тому. Тоді її використовували в якості новинної стрічки або для відображення рекламних текстів. Головною проблемою такого рядка було її сталість, яке незабаром набридало.
Мова про те, що для заміни біжить тексту потрібно було часто залазити в html код сайту і міняти його на новий. Зрозуміло, що дуже часто цього не робили.
Сьогодні весь процес набагато спростився. Якщо говорити про CMS, то для них написано багато спеціалізованих плагінів, сильно спрощують реалізацію рядка, що біжить.
Зараз велика частина анімації в інтернеті створена за допомогою технології flash, і плазуючий текст у веб-дизайні вважається мало не «винтажностью». Але все одно бігають перед очима слова не втратили своєї первозданної краси.
Біжучий рядок може бути використана як вивіска для назви сайту або його розділу. Також вона ідеально підійде для розміщення якої-небудь розумної думки, яка може стати ще одним способом залучення уваги з боку відвідувачів сайту.
Біжучий рядок, написаний на html
Біжучий рядок на сайті html – це найлегший варіант її реалізації з широким діапазоном для творчості.
За рух тексту в html тег відповідає . Його синтаксис:
текст
У цього тега багато значень і атрибутів:
1) direction – встановлює напрям руху тексту. Можливі значення атрибута:
- left — в праву сторону;
- right – вліво;
- up – вгору;
- down – вниз;
2)behavior – відповідає за тип прокрутки. Прийняті значення:
- scroll – рух тексту в одному напрямку;
- slide – одноразове рух з подальшою зупинкою (спливаючий текст);
- alternate – в заданому напрямку і назад.
3)loop – визначає кількість повторень циклів. Можливі значення:
- infinite – нескінченну кількість циклів (задано значення за замовчуванням).
- Ціле число.
4)scrollamount – задає швидкість переміщення рухомого рядка. Приймає ціле значення.
5)width – задається довжина області переміщення.
6)height – задається висота області переміщення.
7)scrolldelay – встановлює час затримки між циклами в мілісекундах.
Інші атрибути тега є общестилевыми для всіх елементів мови гіпертексту.
Тег був створений спеціально під браузер Internet Explorer. До недавнього часу його не сприймали деякі інші браузери, але зараз його бачать всі.
І якщо трохи «погратися» з кодом, то можна змусити рухатися не тільки текст, але і картинки. А це вже початковий рівень анімації, панове!
Ось код цього прикладу:
Едрит-Мадрид! Куди мене несе!
Біжучий рядок для Joomla
Власникам сайтів на основі CMS наведений вище приклад не підійде. Точніше, підійде, але потрібно знати, куди можна «вліпити» цей приклад в html код. А це непросто.
Всі CMS побудовані на основі php, який є серверним мовою програмування. Саме на ньому написаний код, що відповідає за генерацію сторінок сайту. Тобто кожен елемент сторінки сайту («підвал», «шапка») генерується під час виконання коду. Так що редагувати код php свого сайту на CMS не варто.
Біжучий рядок для joomla може бути реалізована за допомогою встановлення спеціальних плагінів. Один з них називається Moving Text. Розглянемо його установку по кроках:
1. Заходимо в панель управління Joomla. Через пункт верхнього меню «Розширення» переходимо в «Менеджер розширень».
2. На вкладці менеджера «Установка» вибираємо варіант завантаження і тиснемо на кнопку «Встановити»:
3. Потім переходимо в «Менеджер плагінів».
4. У списку внизу знаходимо потрібний плагін. Відзначаємо його і натискаємо вгорі на кнопку «Змінити». Поруч з нею знаходиться кнопка «Включити», що служить для активації розширення:
5. У наступному вікні в полях «Основні параметри» встановлюємо параметри відображення рядка, що біжить (довжина, швидкість і інтервал між циклами). Після внесення змін не забудьте натиснути на кнопку «Зберегти» (вгорі праворуч).
6. Потім через пункт головного меню «Матеріали» переходимо в «Менеджер материалов». В нижньому списку відзначаємо галочкою потрібний матеріал і тиснемо на кнопку «Змінити» (гурток з олівцем).
7. В редакторі тиснемо на кнопку «html». На екрані відкриється вікно редактора коду. Туди вставляємо { text=Потрібний текст }. Замість «Потрібний текст» пишемо те, що нам потрібно, і тиснемо на «Оновити»:
Після цього у редагованому матеріалі з’явиться рядок, що біжить:
Інші варіанти реалізації біжучого рядка
Біжить текст можна реалізувати не тільки за допомогою html і установкою плагінів. Непоганим вважається варіант реалізації на javascript. Ось приклад його дії:
Ось шматок коду, який розміщується в тезі :
function outmsg(msg,ctrlwidth)
{
msg = » — «+msg
newmsg = msg
while (newmsg.length < ctrlwidth) {newmsg += msg}
document.write («)
document.write («)
document.write («)
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)
}
А ось шматок скрипта, який потрібно помістити в місці відображення рядка, що біжить:
outmsg(«Ви бачите рядок! Вона біжить! УРА!!!»,70)
Також можна реалізувати бігаючий текст за допомогою бібліотеки jquery:
Код прикладу наведено повністю. При бажанні css, jquery і html можна рознести по окремих файлів:
$(function() {
var marquee = $(«#marquee»);
marquee.css({«overflow»: «hidden», «width»: «100%»});
// оболонка для тексту у вигляді span (IE не любить діви з inline-block)
marquee.wrapInner(««);
marquee.find(«span»).css({ «width»: «50%», «display»: «inline-block», «text-align»:»center» });
marquee.append(marquee.find(«span»).clone()); // тут у нас два span з текстом
marquee.wrapInner(»
«);
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»));
});
.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: програми:DXImageTransform.Microsoft.gradient( startColorstr=’#eeeeee’, endColorstr=’#cccccc’,GradientType=0 );
}
Рядок з текстом для показу якого-небудь важливого оголошення на сайті.
Що в підсумку?
Як видно з прикладів, з усіх реалізацій біжучого рядка «легковажним» є варіант на html. Та і його функціонал набагато простіше для розуміння і освоєння. Але така реалізація не підійде для сайтів на CMS. Для них залишаються лише плагіни.
Вибір за вами!
