Урок 18

Використання зображень у веб-документах.
Створення GIF-анімації. Анімація CSS




Приклади GIF-анімації ->   
Animexample.gif
Автор: Branko из английский Википедия - Перенесено с en.wikipedia на Викисклад. собственная работа, Общественное достояние, Ссылка

Створення GIF-файлів за допомогою он-лайн програм:

25 нестандартных примеров gif-анимации, которые привлекут внимание


За допомогою стилів можна задавати не лише статичний вигляд сторінки та її елементів, але й їх динамічну зміну.

Так, можна задати стандартне оформлення для певного блоку (наприклад, div)

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

У наведеному прикладі також змінений радіус фігури (border-radius) - таким чином можна отримати коло, чи еліпс. Цей атрибут може визначати форму фігури за параметрами скруглення окремих кутів, наприклад border-radius:50% 0 0 0; означає, що скруглений буде лише 1 верхній лівий кут.


Серед анімованих властивостей можна виділити трансформацію transform, яка може набувати значень matrix(n,n,n,n,n,n) - перетворення, translate(x,y) - переміщення, scale(x,y) - масштаб, rotate(кут) - поворот, skew(кут-х,кут-у) - нахиляння, perspective(n) - перспектива



Дистосвіта. Веб-технології. Анімація 👉


Завдання 1:

Створити анімаційні ефекти до картинки, чи з групи картинок.
картинки для анімації
  • вибрати групу картинок чи картинку;
  • виконати зміни у картинках, створивши 4-6 послідовних змін за задуманим сценарієм;
  • завантажити картинки на ресурс, створити GIF-анімацію за задуманим сценарієм.
  • зберегти результати роботи в файл GIF та надати на перевірку



Завдання 2:

Створити анімаційні ефекти за допомогою стилів CSS.

  • створити файл html  та файл css
  • за своїми уподобаннями створити 3-4 зміни кольору та форми фігури, що переміщується
  • у тексті задати своє ім'я та прізвище
  • зберегти файли та надати на перевірку

2 коментарі:

Підписатися на: Дописи (Atom)