Використання зображень у веб-документах.
Створення GIF-анімації. Анімація CSS
Приклади GIF-анімації ->
Створення GIF-файлів за допомогою он-лайн програм:
25 нестандартных примеров gif-анимации, которые привлекут вниманиеhttps://www.imgonline.com.ua/gif-animation.php
https://ru.toolson.net/GifAnimation/Create
https://online-converting.ru/image-to-video/
За допомогою стилів можна задавати не лише статичний вигляд сторінки та її елементів, але й їх динамічну зміну.
Так, можна задати стандартне оформлення для певного блоку (наприклад, 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 та надати на перевірку
- створити файл html та файл css
- за своїми уподобаннями створити 3-4 зміни кольору та форми фігури, що переміщується
- у тексті задати своє ім'я та прізвище
- зберегти файли та надати на перевірку
Немає коментарів:
Дописати коментар