Прывабныя старонкі, ці Аб тым, як у HTML зрабіць бягучы радок

Вытрымка балансу паміж прыцягненнем увагі наведвальнікаў і анімацыяй старонак сайта мае істотнае значэнне. Сучасны карыстальнік інтэрнэту дастаткова вопытны і прытрымліваецца сваіх канкрэтным планам, якія ўкладваюцца ў пэўныя формы прадстаўлення. Менавіта шматлікія рэкламныя тэхналогіі распрацоўшчыкаў і дызайнераў сайтаў сфармавалі адэкватную рэакцыю наведвальнікаў. Гэта важна ўлічваць. Калі ў планах няма мэты стварэння сапраўды актыўнага сайта, здольнага рэагаваць індывідуальна на кожнага, хто зайшоў на старонку, прапаноўваючы дыялог, на які ён разлічвае, то лепш не выяўляць залішняй стараннасці ў галіне рэкламы наогул і дынамікі старонак у прыватнасці.

Дакучлівая анімацыя як нечаканае гукавое суправаджэнне або прапанову "напішыце нумар тэлефона і праз хвіліну вам патэлефануюць" ужо не прыцягвае наведвальніка, а ў большасці выпадкаў зніжае цікавасць да рэсурсу, тады як зрабіць бягучы радок у HTML кодзе можна для таго, каб звярнуць увагу на патрэбныя элементы сайта.

JavaScript або HTML

Магчымасці HTML і CSS дазваляюць хутка атрымаць розныя арыгінальныя эфекты перамяшчэння элементаў, прычым часта можна абыйсціся нават без простага JavaScript кода, так як зрабіць бягучы радок і тое, што бегае малюнак дазваляе тэг marquee, і без лішніх выдаткаў. Першапачаткова ён з'явіўся ў Internet Explorer, затым быў рэалізаваны і ў іншых браўзэрах.

Цікавасць да простай анімацыі ў апошні час зменшыць, а варыянты, якія апісваюць, як у HTML зрабіць бягучы радок, сталі лічыцца перажыткам мінулага. Хоць невядома, што пара адносіць да гісторыі і здраджваць забыццю. Іншую гістарычную рэліквію можна так падаць сучаснікам, што цікавасць будзе вышэй, чым ад прымочак самага дарагога смартфона або інтэлекту нанаробаты.

тэг marquee

Тэг marquee дазваляе задаць рух уверх / ўніз, злева направа ці, наадварот, ўнутры ўсёй старонкі або асобнага блока. Маюцца атрыбуты колеру памераў, хуткасці. Распрацоўшчык мае поўнафункцыянальную палітру інструментаў, каб зрабіць з'яўленне і рух кантэнту на старонцы асэнсаваным, прывабным і ненадакучлівым. Перад тым як у HTML зрабіць бягучы радок, трэба зразумець, што гэта перш за ўсё вынік цікавасці распрацоўніка да наведвальніка, яго жаданне прыцягнуць апошняга добрым кантэнтам, прапанаваным належным чынам. Зрэшты, справа зусім не ў тых, што бягуць радках, а ў тым, як выканана старонка і ўзаемазвязаны яе элементы.

Думка пра тое, як у HTML зрабіць бягучы радок у ненавязлівае варыянце, каб зрабіць старонку жывы, прыходзіць у галаву кожнаму распрацоўніку. У такім элеменце можна адзначыць актуальную інфармацыю, паказаць рух акцый, змяненне цэн, з'яўленне зніжак і гэтак далей.

Асноўныя атрыбуты Marquee

Marquee прапануе не асабліва вялікі выбар варыянтаў, якія апісваюць, як стварыць бягучы радок у HTML:

• атрыбут behavior вызначае рух паміж бакамі элемента (alternate);
• скролінг, пры якім кантэнт па крузе выходзіць з-за адной мяжы элемента і сыходзіць у іншую (scroll);
• можна выводзіць словы і "прыляпляць" іх адзін да аднаго (slide).

Напрамак руху вызначае атрыбут direction, які дазваляе вызначыць рух налева-направа (left | right) або ўверх-уніз (up | down).

Мяжы вобласці, у якой перамяшчаецца кантэнт, вызначаюць атрыбуты width і height, якімі можна задаць "тонкія" эфекты. это не всегда именно перемещение информации. Бо ідэя, як у HTML зрабіць бягучы радок - гэта не заўсёды менавіта перасоўванне інфармацыі. Можна задаць вельмі маленькія мяжы для аднаго знака (напрыклад, "о", "х", "!", ...) і атрымаць зусім нечаканыя і прывабныя кампазіцыі элементаў, не выдаткаваўшы ні аднаго байта кода на JavaScript.

устаўка малюнка

Перамяшчаць можна не толькі інфармацыю, але і іншыя элементы HTML-разметкі. Можна дамагчыся арыгінальных эфектаў пры перамяшчэнні, напрыклад, * .gif малюнкаў. У адрозненне ад фарматаў PNG і JPG, малюнкі GIF могуць быць самі па сабе аніміраваныя. Напрыклад, можна намаляваць раскручанае кола аўтамабіля або кроплю, якая змяняецца, калі ляціць да зямлі. Задаўшы рух па гарызанталі колы, якое само па сабе круціцца, можна стварыць ілюзію руху. Ну, а чатыры колы - гэта ўжо жывы аўтамабіль без адзінай радкі JavaScript кода.

Аналагічна можна задаць рух кроплі зверху ўніз. Пакуль малюнак "падае", калі яго змяненне адпавядае аэрадынаміцы працэсу, будзе дасягнуты патрэбны эфект зусім нікчэмнымі дзеяннямі.

Як зрабіць бягучы радок у HTML апцыянальнымі сродкамі проста і эфектыўна? Можна прыдумаць цікавыя варыянты прымянення нетрадыцыйных спосабаў. Вядома, што змены кветак сімвалаў, фону, загрузка малюнкаў, маніпуляцыі з памерамі элементаў дапускаюцца на старонках у дынаміцы. Гэта робіць магчымым ствараць беглыя радкі, напрыклад, у выглядзе паслядоўнасці элементаў, якія з'яўляюцца на экране з рознай ступенню празрыстасці, мяняюць свае памеры або становішча на старонцы.

Гіпертэкст і праграмаванне: усе фармальна і строга распісана, але нават строгія фармальныя канструкцыі не абмяжоўваюць магчымасці для зручнага, эфектыўнага і дынамічнага прадстаўлення інфармацыі.