Урок 23. Графіка для веб-середовища. Анімаційні ефекти

23. Графіка для веб-середовища. Анімаційні ефекти

Основний синтаксис додавання зображень на сторінку:

<img src="шлях/до/зображення.jpg" атрибути>

<img> - непарний тег, і "src" - обов'язковий атрибут з адресою зображення.

Також часто використовують атрибути: "alt", "title", "width", "height", і т.д.
"alt" - альтернативний текст для зображення, тобто текст, який буде показуватись, якщо картинка не може бути завантажена.
"title" - текст, який буде показано, при наведенні вказівника миші на картинку.
"width" - довжина зображення.
"height" - висота зображення.

Атрибути

align	Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання текстом
alt	Альтернативний текст для зображення.
border	Товщина рамки навколо зображення.
height	Висота зображення.
hspace	Горизонтальний відступ від зображення до навколишнього контенту.
ismap	Каже браузеру, що картинка є серверною картою-зображенням.
longdesc	Вказує адресу документа, де міститься анотація до картинки.
lowsrc	Адреса зображення низької якості.
width	Ширина зображення.
src	Шлях до графічного файлу.
vspace	Вертикальний відступ від зображення до навколишнього контенту.
usemap	Посилання на тег <map> , що містить координати для клієнтської карти-зображення.

Також для цього тега доступні універсальні атрибути і події.

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

Наприклад, кілька зображень можна сумістити, за принципом, схожим на режими накладання шарів у Photoshop.

 

Якщо застосувати такий стиль
<div style="background-image: url(https://lh3.googleusercontent.com/-yo3h8_GR4aQ/XDyaXMq9zSI/AAAAAAAAB6o/uwpNiK4VirwFmGICcngn0dp67OmLXWGIwCLcBGAs/h120/image_part_002.jpg), url(https://lh3.googleusercontent.com/-ND776wQWIxs/XDybF0IrCuI/AAAAAAAAB7I/TE5nnv2xE1YptNCpLTidR9xn52gRkQKZgCLcBGAs/h120/picture11.png);
background-color: green;
background-blend-mode: screen;
height:200px; width:300px;
background-size: cover;"></div>
то отримаємо зображення

Варіантів накладання background-blend-mode є досить багато, їх можна комбінувати, записуючи черз кому: normal (без ефектів), multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

Ось ще деякі приклади стилів:
background-image: url(файл першого зображення), url(файл другого зображення); background-blend-mode: lighten; height:200px; width:300px; background-size: cover;

background-image: url(файл першого зображення); background-color: #FF3399; background-blend-mode: luminosity; height:200px; width:300px; background-size: cover;

background-image: url(файл першого зображення), url(файл другого зображення); background-blend-mode: screen; height:200px; width:300px; background-size: cover;

background-image: url(файл першого зображення), url(файл другого зображення); background-blend-mode: color-burn; height:200px; width:300px; background-size: cover;

Дуже цікавим може бути накладання не лише цілих зображень, але й тексту чи блоків, для яких потрібно налаштувати стиль mix-blend-mode.mix-blend-mode: exclusion; color: white; top: 20px; left:20px; position: relative;

mix-blend-mode: luminosity; top: 20px; left:20px; position: relative;

<div style="mix-blend-mode: luminosity; background-color: red; width: 250px; height: 50px; top:20px; position: relative;"> <h1 style="color:yellow; mix-blend-mode: screen;"> Happy New Year </h1> </div>

mix-blend-mode: difference; background-color: grey; color:black; position: relative; top:50px; text-align:center; text-transform: uppercase;

<div style="color: red; height:200px; width:300px; top: 10px; left:20px; position: relative; font-size: 47px; font-weight: bold; font-family: 'Open Sans';"> Новий <div style="color:green; left:10px; position: relative; mix-blend-mode:difference;"> веб <div style="color: blue; left:10px; position: relative; mix-blend-mode:multiply;"> дизайн </div> </div> </div>

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

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

Так, можна задати стандартне оформлення для певного блоку (наприклад, 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.

Додаткові посилання

Створення геометричних фігур за допомогою CSS
Створення фігур на css: http://www.internet-technologies.ru/articles/sozdaem-geometricheskie-figury-s-pomoschyu-css.html
Завантажувальні анімації: http://wp-lessons.com/zagruzochnyie-animatsii-css3
та приклади реалізації http://wp-lessons.com/demo/css/zagruzochnyie-animatsii-css3.html
Анімоване меню: http://www.internet-technologies.ru/articles/polnocvetnoe-animirovannoe-navigacionnoe-menyu-na-css3.html
https://sebweo.com/oznajomlennya-iz-css-animatsiyeyu-animation/
http://webstudio2u.net/ua/design-site/260-dhtml-effects.html
http://beloweb.ru/javascript-jquery/15-potryasayushhih-animirovannyih-effektov-dlya-teksta-na-css.html