Анімація на сайті
Кожен власник сайту хоче мати яскравий, і запам'ятовується веб-ресурс, здатний порадувати відвідувача функціональними та візуальними перевагами. І тому сучасні власники сайтів віддають перевагу сайтам, створеним з використанняманімованих елементів, здатних порадувати відвідувача красивим, інтерактивним оформленням і схилити до повторного відвідування сайту.
З якою метою на сайті використовується анімація?
Насамперед – для привернення уваги відвідувача до певних місць на сторінці сайту. У більшості подібних випадків анімацію використовують для привернення уваги до комерційно значущих модулів і блоків ресурсу.
По-друге – для надання ресурсу більшої динаміки. Найчастішеанімацію на сайті використовують щоб “оживити” статичний сайт.
По-третє – для подання інформації в компактному вигляді. Зокрема використання динамічних flash-елементів, таких як інтерактивна галерея, здатне заощадити чимало місця на сторінці.
І по-четверте – для вирішення індивідуальних технічних та дизайнерських завдань.
Найбільш поширеними технологіямиweb-анімації є використання графічних зображень у форматі .gif а також елементів flash-анімації.
Gif-анімація на сайті
Gif-анімація є найбільш простим, у плані вимогливості, видом web-анімації, оскільки для відображення графічних елементів у форматі .gif браузеру не потрібно підвантажувати сторонні плагіни та розширення. По суті gif-анімація на сайті - це впровадження в дизайн сайту графічних елементів з картинками, що послідовно змінюються, кожен з яких має свій тимчасовий інтервал. За рахунок використання в gif-ролику оптимізованих для веб-зображень, він має порівняноневеликий розмір і практично не впливає на "вагу" сторінки під час завантаження сайту. Крім того використання на сайті анімованих .gif не вимагає постійного зв'язку сайту з сервером, так як файли анімації підвантажуються на сторінку один раз.
Основним недоліком використання формату .gif як web-анімації є повна відсутність інтерактивності та порівняно невисокий рівень якості анімаційних роликів. На відміну від технології flash, gif-анімація не дозволяє створювати реалістичні ролики з “гладкими” інтерактивними ефектами.
Flash-анімація на сайті
Технологія flash на сьогоднішній день є однією з найбільш використовуваних для розробки повноцінних ресурсів та спеціальних ефектів для сайтів.
Використанняflash-анімації на сайті незамінне в тих випадках, коли зовнішній вигляд сайту стоїть на першому місці, і основною його метою є привернення уваги та створення позитивного стильового образу. На сайтах, створених з використанням технології flash, основний акцент зроблено саме на візуальне сприйняття ресурсу користувачем, а вже друге чергу на його функціональні можливості.
Але для того, щоб ваш сайт мав яскравий, динамічний вигляд, зовсім не обов'язково створювати повноцінний flash-сайт, достатньо обмежиться лише вставкою окремих flash-елементів, що становлять лише частину в оформленні сторінок ресурсу. Даний підхід дозволяє перетворити сайт на інтерактивний, динамічний інтерфейс із збереженням його функціональних можливостей. Крім того, даний підхід при розробці flash-сайтів дозволять розробляти ресурси з необмеженими можливостями в плані адміністрування, тоді як повноцінні flash-сайти мають лімітований адміністративний функціонал, пов'язаний з використанняманімованих елементів, внесення редагування в які вимагає використання спеціалізованих програм для редагування flash-роликів.
Однак варто пам'ятати, що в будь-якій справі потрібно знати міру, і використання flash-анімації у створенні сайтів не є винятком. Динамічні flash-ролики в рази важчі за статичні елементи сайту, і це безпосередньо позначається на швидкості завантаження сторінок сайту, а це вже мінус, тому що сучасний Інтернет-користувач двічі подумає, а чи коштує ваш ресурс очікування? і чи не продовжити пошуки послуги, що його цікавить, або товару на іншому більш “шустрому” сайті. Так що якщо використання flash-анімації на сайті не є необхідною умовою, продиктованою іміджевою політикою фірми, або не є частиною дизайнерського задуму творців сайту, варто подумати про альтернативні рішення.
Одним із способів вирішення даної дилеми є використанняflash-анімації не на кожній сторінці сайту, а в одному або кількох спеціалізованих розділах сайту, наприклад, у пункті “презентація”. Це дозволить скоротити швидкість завантаження сайту та у правильному напрямку зорієнтувати користувача.
Ще одним альтернативним підходом при розробці анімованих елементів на сайті є використання технології HTML5, яка незабаром не тільки замінить, а й перевершить можливості flash-анімації, як за функціоналом, так і за ступенем адаптації для Інтернету.
Приймаючи рішення про те, чи варто розміщувати на сайті flash-елементи слід провести глибокий аналіз цільової аудиторії майбутнього проекту. В результаті проведених досліджень слід з'ясувати, чи доцільно використовувати на сайті анімацію як таку і якщо так, то який сценарій динамічних роликів кращий для даноїгрупи користувачів. Крім сценарію flash-елемента необхідно також визначитися з його місцем розташування на сайті, і розміщувати динамічні об'єкти лише в тих місцях, куди необхідно привернути найбільшу увагу користувача.
Так як процес створення flash-елементів і flash-сайтів загалом дуже трудомісткий процес, дуже важлива грамотна постановка задачі та складання замовником максимально докладного Технічного Завдання, в якому слід вказати не тільки технічні дані, на кшталт розмірів ролика та його допустимої "ваги", але також і кращий сценарій, затвердити графічні елементи та динамічні ефекти. Залежно від цього, наскільки докладно було складено завдання залежатиме як кінцевий результат, а й його ціна, оскільки постійне внесення правок під час роботи безпосередньо позначитися остаточної вартості.
Якщо ви вважаєте, що на вашому сайті неодмінно має бути присутня flash-анімація або він повинен бути повністю побудований за технологією flash - ми готові реалізувати це для вас.
У перелік послуг web-студії HINEX.RU входить створення flash-баннерів, листівок, інтерактивних презентацій, електронний варіант каталогу продукції та інших елементів, виконаних з використанням flash.
Web-анімація за допомогою скриптів.
Домогтися динаміки в оформленні сайту можна не тільки за допомогою специфічних елементів у форматах, що спочатку мають на увазі анімацію, але і за допомогою java-скриптів.
В даному випадку анімація програється на клієнтській, браузерній стороні сайту, а не в самому елементі, як це відбувається з об'єктами у форматі .gif та flash.
Створення web-анімації засобами javascript варто довіряти тільки досвідченим програмістам, добре знайомим з даною мовою web-програмування, атак само тим, хто має досвід роботи з яваскрипт-бібліотеками на кшталт jquery, так як неграмотно написана javascript-анімація, по-перше, може негативно вплинути на швидкість завантаження сайту, по-друге неправильно відображатися в деяких Інтернет-браузерах, і по-третє викликати появу помилок, які будуть перешкоджати індексації сайту пошуковими роботами.
HTML5 + CSS3 анімація сайту
За допомогою анімації за допомогою html5 і css3 можна досягти ефектів, що не відрізняються від результатів тієї ж flash-анімації, хоча і тут є свої "але". Якщо Javascript-анімація на сайтах дуже поширена, то інтерактивна динаміка, створена за допомогою html5 і css3, немає. Це обумовлено тим, що ці технології поки не є офіційними стандартами і адекватно відображаються на сайтах не всіма браузерними клієнтами, хоча, наприклад, формат html5 вже сьогодні називають повноцінною заміною flash-анімації на сайті.
Наведемо приклади того, в чому саме формат html5 та css3 анімація перевершує flash-анімацію: мова html5 та css3 не трубить установки користувачем додаткових плагінів на комп'ютер, формат html5 та css3 на відміну від Флеш-анімації індексується пошуковими системами, сайти створені за допомогою html5 та css3 набагато “легше”, у плані швидкості завантаження, сайтів анімованих за допомогою flash, сайти на html5 css3 порівняно дешевші за проекти побудовані на технології flash.
Але, на відміну від того ж JavaScript, говорити про переваги html5 і css3 над сучасними віяннями в web-анімації поки що рано, т.к. це все-таки погляд у майбутнє. Ця мова програмування сайтів порівняно молода, тому чекаємо на затвердження html5 і css3 як стандартів і насолоджуємося найбільш адаптованою для Інтернету анімацією.