Розбіжності

Тут показані розбіжності між вибраною ревізією та поточною версією сторінки.

--- subjects:basic:informatika:web:animasiini_efekty [06.11.2022 23:15] – створено Адміністратор
+++ subjects:basic:informatika:web:animasiini_efekty [11.11.2022 00:53] (поточний) – [Різні типи анімації для використання у веб-дизайні] Адміністратор
@@ Рядок 1: / Рядок 1: @@
 ====== Анімаційні ефекти ======
+Анімація завжди служила для того, щоб вдихнути душу в сторінки вашого сайту, зробити його більш живим і зрозумілим для користувача. Навіть примітивна анімація, найпростіші гіфки і зображення, що змінюються часто використовуються в декоративних цілях. Вони можуть розважити користувача і просто виділити ваш сайт серед конкурентів.
+Коли справа доходить до анімації вашого веб-сайту, варіанти безмежні, але це не означає, що всі елементи вашого веб-сайту повинні обертатися та стрибати по головній сторінці. Вам потрібно знайти баланс між кількістю анімації, яку ви використовуєте на веб-сторінці свого сайту.
+===== Різні типи анімації для використання у веб-дизайні =====
+Коли справа доходить до анімації у веб-дизайні, існує два основних принципи її використання: **функціональність** і **естетика**. Функціональна анімація допомагає користувачам подорожувати сайтом і робить обробку інформації візуально приємною. Естетична анімація, з іншого боку, не має жодної іншої функції, крім того, щоб зробити сайт більш привабливим.
+==== Анімація завантаження ====
+Найчастіше використовується в дизайні веб-сайтів для функціональності. Анімацію завантаження можна побачити в основному, коли сайт відкривається вперше, і для завантаження потрібно деякий час. Її можна використовувати для завантаження відео, завантаження файлів або будь-яких інших подібних процесів на вашому веб-сайті.
+<grid>
+<col md="4">
+{{ :subjects:basic:informatika:web:kitchen_load_animation.gif?nolink }}
+</col>
+<col md="4">
+{{ :subjects:basic:informatika:web:circular-water-fill-loading-animation.gif?nolink |}}
+</col>
+<col md="4">
+{{ :subjects:basic:informatika:web:dribbble_1.gif?nolink&375 |}}
+</col>
+</grid>
+Для ефективного використання анімація завантаження повинна відповідати стилю сайту. Наприклад, якщо ваш веб-сайт барвистий, ви можете мати анімацію завантаження, як м’яч, що стрибає, а для сайтів, пов’язаних із їжею, це може бути пончик або каструля.
+==== Анімація прокрутки ====
+Майже кожен веб-сайт в Інтернеті має вбудовану анімацію прокручування, і це стає звичним. Але це не означає, що ви не повинні використовувати цю дивовижну функцію у своєму веб-дизайні. Якщо ви хочете використовувати цю анімацію, то додайте елементи, які рухаються поступово разом із прокручуванням.
+{{ :subjects:basic:informatika:web:scrolling-animations.gif?nolink }}
+==== Анімація при наведенні ====
+Ця анімація є поширеним функціональним типом, який ви обов’язково повинні використовувати у своїх блоках сайту із закликом до дії та в меню.
+{{ :subjects:basic:informatika:web:design-shack-animation-copy.gif?nolink }}
+==== Анімація галереї зображень ====
+Для відвідувачів сайту є зручним переглядати галерею зображень не клацаючи для зміни зображень. Це чудове використання анімації, щоб привернути увагу відвідувачів до товарів. Ви можете додати каталог товарів або слайд-шоу, відображаючи зображення по одному або одразу дкількох.
+{{ :subjects:basic:informatika:web:you-and-i-graphics-animation-copy.gif?nolink }}
+==== Анімований фон ====
+Однією з наймодніших анімацій сьогодні є використання високоякісної графіки у фоновому режимі. Це вдосконалення галереї зображень, де анімація вбудована як фон вашого веб-сайту для всієї сторінки або окремих розділів. Ці анімації можуть покращити індивідуальність вашого сайту.
+Це беззвучне фонове відео або переходи між зображеннями.
+{{ :subjects:basic:informatika:web:femme-fatal-design-animation-copy.gif?nolink }}
+===== Найкращі інструменти, які допоможуть вам оживити дизайн веб-сайту =====
+Тепер у вас є уявлення про різні типи анімації, які можна використовувати у вашому веб-дизайні. Давайте розглянемо програмне забезпечення та інструменти, які допоможуть вам оживити веб-сайт і зробити його більш привабливим.
+Ось деякі з популярних інструментів, які використовують веб-дизайнери для створення чудової анімації:
+==== CSS анімації: ====
+Для створення анімації засобами CSS, використовуйте властивість ''animation'' разом з правилом ''@keyframes'', яке встановлює візуальні ефекти для анімації.
+Зверніть увагу, що порядок у визначенні властивості має дуже важливе значення. Перше значення у формі часу, розглядається як animation-duration, а друге - як animation-delay.
+Порядок також важливий для визначення animation-name серед інших значень. Під час аналізування правил, ключові слова допустимі лише для властивостей відмінних від animation-name, і значення яких не було задані раніше, будуть прийняті саме для них, а не для animation-name. Крім того, мають бути задані значення без задання для всіх властивостей, щоб була можливість визначити animation-name.
+**Анімація — це набір ключових кадрів, або кейфреймів, які зберігаються в CSS**
+<code css>
+@keyframes animation-test {
+% {
+width: 100px;
+}
+% {
+width: 200px;
+}
+}
+</code>
+Розберемося, що тут відбувається. Ключове слово @keyframes означає саму анімацію. Потім йде ім'я анімації, в нашому випадку — animation-test. У фігурних дужках міститься список кейфреймів. Ми використовуємо початковий кадр 0% і кінцевий 100% (їх також можна записати як from і to).
+Погляньте на код нижче. Анімацію можна задати і таким чином:
+<code css>
+@keyframes animation-test {
+from {
+width: 0;
+}
+% {
+width: 75px;
+}
+% {
+width: 150px;
+ }
+to {
+width: 100%;
+}
+}
+</code>
+Пам'ятайте, якщо початковий або кінцевий кадри не вказані, браузер визначить їх автоматично, ніби до них не була застосована анімація.
+Під’єднати анімацію до елемента можна так:
+<code css>
+element-selector {
+animation-name: your-animation-name;
+animation-duration: 2.5s;
+}
+</code>
+Властивість animation-name задає ім'я для анімації @keyframes. Правило animation-duration Правило animation-duration задає тривалість анімації в секундах (1s, 30s, .5s) або мілісекундах (600ms, 2500ms).
+==== JavaScript анімація ====
+JavaScript пропонує більшу гнучкість щодо анімації та переходів, оскільки за допомогою цього ви також можете переміщувати елементи DOM на веб-сторінці.
+За допомогою JavaScript-анімацій можна робити речі, які не можна реалізувати CSS.
+Анімація реалізується через послідовність кадрів, кожен із яких трохи змінює HTML/CSS-властивості.
+Нижче наведено деякі з найбільш часто використовуваних сторонніх бібліотек JavaScript для створення анімації для дизайну веб-сайту:
+  * ScrollMagic
+  * Velocity.js
+  * Anime.js
+  * Vivus
+  * Mo.js
+  * GreenSock (GSAP)
+==== Canvas ====
+Canvas (англ. canvas — «полотно») — елемент HTML5, який можна застосовувати для малювання графіки використовуючи скрипти (переважно JavaScript). Наприклад його можна застосувати для малювання графів, створення фотокомпозицій а також анімації.
+Щоб відобразити ''<canvas>'' в html-документі, слід використати наступний код:
+<code html>
+<canvas id="tutorial" width="150" height="150">
+</canvas>
+</code>
+Він дуже схожий на тег ''<img>'', з тією лише різницею, що не містить атрибутів src і alt. Елемент <canvas> має всього два атрибути — ''width'' і ''height''. Обидва вони не є обов'язковими, і можуть бути задані через властивості DOM. Якщо ширина і висота не визначені, ''<canvas>'' буде створений шириною в 300 пікселів і 150 пікселів заввишки. Розмір елемента може бути довільним і задаватися через CSS, але при промальовуванні картинка масштабується відповідно до компонування.
+==== SVG ====
+Scalable Vector Graphics (скорочено SVG) (з англ. масштабована векторна графіка) — специфікація мови розмітки, що базується на XML, та формат файлів для двомірної векторної графіки, як статичної, так і анімованої та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні лінки шляхом застосування простих XLink-ів. Ця специфікація є відкритим стандартом, розробленим робочою групою англ. SVG Working Group організації World Wide Web Consortium.
+==== WebGL ====
+WebGL — це стандарт на базі OpenGL ES 2.0, що дозволяє розробникам вебконтенту вбудовувати в вебоглядачі, які підтримують HTML5, повноцінну 3D-графіку, не вдаючись до посередництва плагінів. В намірах розробників поширити стандарт WebGL не тільки в браузерах персональних комп'ютерів, а й у мобільних інтернет-пристроях. До робочої групи WebGL входять Khronos Group, представники провідних розробників інтернет-браузерів, таких як Apple Safari, Google Chrome, Mozilla Firefox і Opera, а також фахівці AMD і Nvidia.
+===== Джерела =====
+  * [[https://www.exploreinsiders.com/website-animation-types-and-tools-to-animate-website/|Website Animation: Types of Animations & Best Tools to Use]]
+  * [[https://avivi.pro/ua/blog/animatsiya-interfeysov-s-pomoshchyu-css/|Анімація інтерфейсів за допомогою CSS]]
+  * [[https://css.in.ua/css/property/animation|css властивість animation]]
+  * [[wp>Canvas]]
+  * [[wp>Scalable Vector Graphics]]
+  * [[wp>WebGL]]