Привабливі сторінки, або Про те, як в 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 опциональнимі засобами просто і ефективно? Можна придумати цікаві варіанти застосування нетрадиційних способів. Відомо, що зміни кольорів символів, фону,завантаження зображень, маніпуляції з розмірами елементів допускаються на сторінках в динаміці. Це робить можливим створювати рухомі рядки, наприклад, у вигляді послідовності елементів, які з'являються на екрані з різним ступенем прозорості, змінюють свої розміри або положення на сторінці.

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