1 of 11

Анімаційні ефекти

За навчальною програмою 2018 року

Урок 16

10

(11)

2 of 11

Актуалізація опорних знань і життєвого досвіду

Розділ 3 § 16

Пропоную визначити свої асоціації до слова «анімація».

Пропоную організувати диспут з питання:

Чи потрібна анімація для сайта?

10�(11)

3 of 11

Випадки доцільності�використання анімації

Розділ 3 § 16

За допомогою анімації веб-дизайнер передає перехідний процес.

Якщо один і той самий об’єкт може перебувати в різних станах в різний час, процес переходу з одного стану в інший найкраще передається за допомогою анімації. Анімація в цьому випадку дає користувачеві можливість відслідковувати зміни, що відбуваються візуально, а не просто уявляти їх.

10�(11)

4 of 11

Випадки доцільності�використання анімації

Розділ 3 § 16

Зміна інформації на екрані.

Дуже зручно використовувати анімацію у веб-дизайні для відображення декількох інформаційних елементів в одній і тій же області екрану.

Наприклад, відображення пояснень до карти. Коли миша наводиться на певну ділянку карти, в кутку екрану з'являється інформація, що відноситься до цієї ділянки.

10�(11)

5 of 11

Випадки доцільності�використання анімації

Розділ 3 § 16

Відображення об’ємних структур

10�(11)

6 of 11

Випадки доцільності�використання анімації

Розділ 3 § 16

Залучення уваги

Якщо, наприклад, ми хочемо виділити в меню назва сторінки, на якій знаходиться користувач, ми можемо поставити миготливу кнопку. Але "мигнути" вона повинна лише кілька разів. Тільки, щоб звернути увагу користувача на себе. А далі їй достатньо змінити трохи колір.

10�(11)

7 of 11

Типи анімацій

Розділ 3 § 16

Тип анімації і програмного забезпечення, необхідного для її створення визначається в залежності від конкретного призначення веб-сторінки.

GIF-анімація;

Флеш-анімація (дана технологія є застарілою);

Веб-засоби для створення анімацій: CSS і JavaScript;

Анімація за допомогою CSS;

Анімація за допомогою JavaScript.

10�(11)

8 of 11

Анімаційні ефекти

Розділ 3 § 16

Анімація є важливою складовою дизайну веб-сайту і у веб-дизайнера є широкі можливості вибору багатьох технологій, які допоможуть в досягненні конкретних цілей, що ставляться перед сайтом.

10�(11)

9 of 11

Запитання для рефлексії

Розділ 3 § 16

  1. Чи можна сказати, що я розуміюся наанімаційних ефектах?
  1. Чи є в мене потреба в самоосвітній діяльності з веб-технологій?
  1. Що на уроці в мене виходило найкраще? Чому?
  1. Чи маю я задоволення від роботи на уроці?

10�(11)

10 of 11

Працюємо за комп’ютером

Розділ 3 § 16

10�(11)

11 of 11

Дякую за увагу!

За навчальною програмою 2018 року

Урок 16

10

(11)