1. Дайте відповіді на питання.
2. Опрацюйте лекційний матеріал.
Не секрет, що анімація є досить популярним та широковживаним явищем у сучасному веб-дизайні. Вона робить зображення живим, і, відповідно, краще запам’ятовується. І, як наслідок, той сайт, у дизайні якого вона була застосована, теж має більше шансів запам’ятатися користувачеві та повернути його до себе знову. Це працює.
Анімація буває різна. По-перше, можна анімувати іконки сайту. При цьому, вони будуть «оживати» при наведенні курсору. Це інтуїтивно підказує користувачеві, що область, на котру він навів курсор миші, є клікабельною, тобто при натисненні на цю область відбудеться якась подія.
Анімувати можна зображення або світлину, що виступає основною на головній сторінці сайту – це також буде виглядати жваво і яскраво. В той же час, потрібно виділити основну інформацію та навігаційні елементи так, щоб користувач, під враженням від «привітання» не забув, за чим, власне, він прийшов на цей сайт.
Слід особливу увагу приділити використанню анімації в інфографіці. Погодьтеся, що це виглядає дуже динамічно і яскраво, коли графіки або діаграми неначе оживають, і наочно та зрозуміло демонструють суху цифрову інформацію.
Правильно підібрана швидкість та плавність анімації, підсвідомо викликає у користувача спокій і, як наслідок, довіру до веб-ресурсу.
Єдине, про що потрібно пам’ятати, використовуючи анімацію у веб-дизайні – це те, що користувач приходить на сайт, у першу чергу, за необхідною інформацією. Тому, під час розробки макету, необхідно врахувати всі деталі так, щоб різноманіття анімаційних ефектів не збило його з вірного шляху, а лише допомогло запам’ятати цей веб-ресурс. Інакше, вона тільки нашкодить і викличе негативне ставлення користувача.
Найпростіший спосіб “оживити” сайт за допомогою анімації – це використати рухомі gif-зображення. Додаються такі зображення так само як і звичайні (попередня лекція).
За допомогою стилів можна задавати не лише статичний вигляд сторінки та її елементів, але й їх динамічну зміну.
Так, можна задати стандартне оформлення для певного блоку (наприклад, div), а також його оформлення у момент наведення вказівника миші (hover) на цей блок. Можна переглянути html-код, опис стилів та результат застосування такого ефекту:
Приклад. Стандартно блок div має ширину 200 та висоту 50 пікселів, а при наведенні мишки (подія hover), ширина змінюється на 300 пікселів протягом 2 секунд і розмір шрифту збільшується. Якщо додати властивість transition: 2s до початкового стилю, то повернення до 200 пікселів теж відбуватиметься не миттєво, а протягом вказаного часу.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Блокова верстка в три колонки</title>
<style type = “text/css”>
div {
border: 4px double black;
background: yellow;
padding: 10px;
width: 200px;
height: 30px;
}
div:hover {
width: 300px;
transition: 2s;
font-size:xx-large;
}
</style>
</head>
<body>
<div>Я люблю Україну</div>
</body>
</html>
Для гнучкого керування процесом анімації можна задавати визначення окремих кадрів, keyframes. Для такої анімації необхідно вказувати ім’я – для використання при виклику, а також стильові властивості у різні моменти часу:
<відсоток> значення властивостей у заданий момент часу (у відсотках);
<властивість> анімована властивість;
<значення> значення в момент, описаний селектором кадру.
Приклад. Блок div початково має червоний колір тла. Протягом 4 секунд відбувається анімація example з такими етапами: колір заливки змінюється з червоного до жовтого, до синього, до зеленого. У кінці відбувається повернення до червоного кольору, визначеного для блоку div.<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Анімація example </title>
<style type = “text/css”>
div {
width: 200px;
height: 50px;
background-color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<div>Я люблю Україну</div>
</body>
</html>
Можна задавати зміну позиції в анімації: для цього у початкових властивостях слід вказати відносне позиціювання, а у кадрах анімації – задати параметри розташування об’єкту відносно верху та лівої межі сторінки.
Приклад. Змінений радіус фігури (border-radius) – таким чином можна отримати коло, чи еліпс. Цей атрибут може визначати форму фігури за параметрами округлення окремих кутів, наприклад border-radius:50% 0 0 0; означає, що округлений буде лише 1 верхній лівий кут.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Блокова верстка в три колонки</title>
<style type = “text/css”>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
border-radius: 50%;
text-align:center;
position: relative;
}
@keyframes example {
0% { background-color: red; left: 0px; top: 0px;}
25% { background-color: yellow; left: 200px; top: 0px; border-radius: 50% 0 0 0;}
50% { background-color: blue; left: 200px; top: 100px; border-radius: 50% 50% 0 0}
75% { background-color: green; left: 0px; top: 100px; border-radius: 50% 50% 50% 0}
100% { background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<div>Я<br /> люблю<br /> Україну</div>
</body>
</html>
Серед анімованих властивостей можна виділити трансформацію transform, яка може набувати значень
matrix(n,n,n,n,n,n) – перетворення,
translate(x,y) – переміщення,
scale(x,y) – масштаб,
rotate(кут) – поворот,
skew(кут-х,кут-у) – нахиляння,
perspective(n) – перспектива
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Блокова верстка в три колонки</title>
<style type = “text/css”>
div {
width: 60px;
height: 60px;
background-color: red;
animation-name: example;
animation-duration: 4s;
border-radius: 50%;
text-align:center;
}
@keyframes example {
50% {transform: rotate(360deg)
}
</style>
</head>
<body>
<div>Я<br /> люблю<br /> Україну</div>
</body>
</html>
Серед додаткових параметрів анімації можна виділити наступні:
animation-delay:2s;- затримка початку анімації
animation-iteration-count: 3; – кількість повторів анімації (infinite; – нескінчене повторення)
animation-direction: reverse; – напрям анімації (повторити у зворотньому порядку). alternate; – повторювати в прямому та зворотньому порядку
animation-timing-function: linear; – прискорення анімації (відсутнє) (можливі значення: ease; ease-in; ease-out; ease-in-out;)
Існує скорочений запис стильових властивостей.
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
можна записати:
div {
animation: example 5s linear 2s infinite alternate;
}
Властивості анімації можуть специфічно підтримуватись різними браузерами, тож для коректного відтворення слід вживати так звані префікси – додавати до стильових властивостей уточнення того, для якого браузера вони призначені.
Chrome & Safari: -webkit-
Firefox: -moz-
Opera: -o-
Internet Explorer: -ms-
div {-webkit-animation: example 5s linear 2s infinite alternate;-moz-animation: example 5s linear 2s infinite alternate;-o-animation: example 5s linear 2s infinite alternate;-ms-animation: example 5s linear 2s infinite alternate;animation: example 5s linear 2s infinite alternate;}
Є вісім властивостей animation (в алфавітному порядку):
animation-delay – задає затримку перед початком анімації, в секундах
animation-direction – вказує на те, чи повинна анімація відтворюватися в зворотному або черговому циклах (reverse або alternate)
animation-duration – визначає те, скільки секунд або мілісекунд потрібно анімації для завершення одного циклу
animation-fill-mode – стиль для елемента, коли анімація не відтворюється. Наприклад, коли анімація завершилася або у неї задана затримка
animation-iteration-count – задає кількість разів, яку має відтворюватися анімація (infinite – для нескінченної кількості разів)
animation-name – визначає ім’я @keyframes анімації
animation-play-state – вказує на те, чи запущена анімація або припинена (running або paused)
animation-timing-function – визначає криву швидкості анімації
Весь синтаксис властивостей анімації виглядає так:
div {
animation-name: тут назва для ключових кадрів;
animation-duration: тривалість анімації в секундах або мілісекундах;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
А короткий запис властивостей анімації виглядає так:
div {
animation: nazva-animaciyi 1.5s ease-out 0s alternate infinite none running;
}
Властивості записуються без ком, бажано в порядку слідування властивостей. При цьому, якщо деякі властивості не вказати, будуть задіяні властивості за замовчуванням. Якщо потрібно присвоїти одному елементу кілька різних ключових кадрів, тоді між властивостями ставиться кома.
Зразок синтаксису ключових кадрів @keyframes виглядає так:
@keyframes [назва анімації] {
0% {/* початковий кадр */
[властивість CSS]: [значення властивості];
}
100% {/* фінальний кадр */
[властивість CSS]: [значення властивості];
}
}
У правилах @keyframes можна використовувати більше двох (початкового і фінального) ключових кадрів (наприклад, проміжні в позначці 30%, 75% і т.д.). Також в кожному ключовому кадрі можна вказувати досить велику кількість властивостей CSS.
Джерела інформації:
3. Виконання вправ.
Продовжуєте працювати над написанням власних сайтів.
Надішліть мені звіт про виконану вами роботу (фото чи скріни веб-сторінок, посилання на сайти – ті хто вже розмістив свій сайт в Інтернеті, або файли з html-кодами сторінок)
Увага! Фотозвіти надсилати мені на електронну адресу або у вайбер не пізніше 19.03.2020
Якщо в процесі роботи виникають якісь питання, то також звертайтеся через електронну адресу або вайбер
електронна адреса: shkolabilin1@gmail.com
вайбер: +380930158447
Домашнє завдання: Опрацювати лекційний матеріал
Сайт вчителя інформатики Панасюк Ірини Вікторівни 