Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Як анімувати SVG стрічку на честь Міжнародного дня психічного здоров'я

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

Міжнародний день психічного здоров'я, заснований Всесвітньою організацією охорони здоров'я, поводитиметься 10 жовтня 2018 року та має на меті підвищити обізнаність щодо питань цієї сфери. Цього року організатори прагнуть надихнути на підтримку та залучити до програм і послуг, які можуть досягти молодих людей та, в ідеалі, ефективно здійснювати лікування на самій ранній стадії, наскільки це можливо.

Щоб відзначити цей день, за допомогою CSS ми зробимо анімаційний ефект SVG на зеленому фоні. В знак своєї обізнаності в питаннях психічного здоров'я, багато людей носять цю стрічку.

У нас будуть дві руки, що з'являються з лівої і правої сторони композиції і з'єднуються в рукостисканні, ілюструючи підтримку, яку люди можуть надавати один одному. Після цього з'явиться зелена стрічка з роз'яснювальним текстом.

Коли роботу буде закінчено, у вас буде наступна анімація (натисніть RERUN, якщо необхідно):

1. Отримайте початковий код.

Я заздалегідь підготував для вас SVG і HTML код, тому ви можете просто зосередитись на використанні CSS, щоб анімувувати різноманітні елементи, складові частини ілюстрації.

Для початку створіть порожній файл HTML, потім скопіюйте і вставте код, наведений нижче:

Збережіть і перегляньте ваш файл в браузері. Ви повинні бачити наступний малюнок, всі елементи SVG повинні бути видимими, деякі з них розміщені поверх інших:

World Mental Health Day 2018 first image

Давайте почнемо з розшифровки кожного включеного елемента SVG, щоб ви знали, з чим саме ми працюємо.

Спочатку у нас є фронтальний вигляд руки, яка з'являється з лівої сторони SVG:

World Mental Health Day 2018 the hand

Далі у нас є тильна сторона руки, яка з'являється справа:

World Mental Health Day 2018 right hand

Після того, як в центрі екрана ми поєднали дві відкриті руки, ми замінимо їх руками, з'єднаними в рукостисканні.

World Mental Health Day 2018 clasped hands

Далі у нас плавно проявиться зелена стрічка, символ обізнаності в питаннях ментального здоров'я.

World Mental Health Day 2018 green ribbon

Після цього плавно проявиться основний текст “World Mental Health Day” ("Міжнародний день психічного здоров'я"):

World Mental Health Day 2018 text label

Останнім текстом, що з'являтиметься, буде дата:

World Mental Health Day 2018 subtitle

2. Додаємо CSS.

Все, що нам потрібно для нашої анімації вже є в коді SVG. Нам залишається тільки дістатися до елементів за допомогою їх ID.

Перше, що ми повинні зробити, це приховати всі елементи, щоб пізніше показувати їх по одному, кожен в свій час. Між наявними тегами <style></style> в файлі HTML, який ви щойно створили, введіть наступний код.

3. Зробіть так, щоб рука (з фронтальної сторони) з'являлася з лівої сторони.

Ми будемо використовувати анімації @keyframes для кожної частини нашої секвенції. Перша анімація, яку ми створимо, буде переміщувати елемент з-поза лівого краю SVG до його положення в центрі.

Додайте наступний код в ваш CSS.

Давайте розберемо кожен крок, щоб зрозуміти, що ми робимо з цим кодом.

Нам скоріше потрібно всього лиш перемістити один елемент з однієї позиції в іншу, ніж рухати його по ламаній ліній впродовж певного проміжку часу. Тому ми використовуватимемо тільки from і to, а не вказуватимемо процентне значення для кожного ключового кадру.

В ключовому кадрі from ми використаємо властивість transform для translate, тобто змінимо положення елемента (вліво), значення -100%. В ключовому кадрі to вкажіть початкове значення позиції елемента: 0%. Анімація ключового кадру автоматично виконає переміщення елемента між позиціями from та to.

Ви, напевно, звернули увагу, що для обох ключових кадрів opacity встановлено на 1. Це означає, що елемент з'явиться на початку анімації і буде видимим протягом всього свого шляху, до кінця, а потім перейде в opacity 0, яке ми встановили раніше, і знову зникне. Нам потрібно зробити це саме так для з'єднаних в рукостисканні ладонях, які з'являться пізніше.

Тепер ми можемо застосовувати анімацію до елемента першої руки нашої SVG, який використовує ID #fronthand. Додайте наступний код CSS.

Тут ми вказуємо ім'я анімації, infromleft, яке буде її виконувати. В другому рядку ми вказуємо, щоб анімація запускалась через 1,5 секунди. І в третьому рядку, ми задаємо функцію часу ease-out, яка зробить рух швидким, і по мірі наближення до кінця, сповільнюватиме його.

Якщо зараз ви збережете і оновите вашу сторінку, то побачите, що рука з'являється з боку і на короткий момент перед зникненням зупиняється в центрі, як зображено нижче:

World Mental Health Day 2018 hand

4. Зробіть так, щоб рука (з тильної сторони) з'являлася справа.

Перш за все, зараз ми створимо практично ідентичну анімацію. Єдина різниця буде в тому, що елемент рухатиметься справа, а не зліва. Додайте наступний CSS до вашого стилю:

Ви бачите, що в ключовому кадрі from, ми встановили 100% замість -100%, що "відштовхує" стартову точку анімації за межі правого краю. Все інше в цьому коді таке ж саме, як і в останній анімації.

Ми застосуємо цю анімацію до елемента руки тильної сторони в SVG, додавши цей код:

Тепер ви повинні побачити дві руки, які рухаються назустріч одна одній, поки вони не перетнуться по центру і знову не зникнуть.

World Mental Health Day 2018 hands crossing over

5. Зробіть з'єднання рук.

Після закінчення руху обидві руки зникають - ми це зробили. Далі нам потрібно створити елемент з'єднаних рук, який з'являється саме тоді, коли попередні руки зникають.

Для цього ми створимо ще одну анімацію ключового кадру і назвемо його instantappear. Для всієї анімації значення opacity встановлено на 1. Додайте в ваш файл наступний CSS:

Застосуйте анімацію #claspedhands до елемента з наступним кодом:

З наступних двох рядках ми викликаємо анімацію instantappear і встановлюємо її тривалість duration на 1 секунду.

В третьому рядку вказуємо анімації затриматись, delay на 1,5 секунди, що відповідає тривалості перших двох анімацій. Таким чином, як тільки закінчаться перші дві анімації, розпочнеться третя.

Далі в четвертому рядку ми встановлюємо властивість animation-fill-mode для forwards.Це вказує анімації зупинитися на її останньому кадрі і так і залишитись. Це збереже значення непрозорості елемента, opacity, на 1 в кінці ключового кадру, замість того,щоб перейти в значення по замовчуванню: opacity - 0, що ми зробили для анімації перших двох рук (фронтальної і тильної сторони).

Перегляньте вашу анімацію. Коли ви все закінчите, то повинні побачити наступне:

World Mental Health Day 2018 clasped hands

6. Поява елементів, що залишились, з повторним використанням ключових кадрів.

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

Створіть нову анімацію, назвавши її fadein і встановіть її перехід від opacity 0 до opacity 1 наступним чином:

Ми хочемо, щоб наступним елементом, який з'явиться, була зелена стрічка, тому застосуємо до неї нашу нову анімацію fadein з наступним CSS:

тут ми маємо ефект появи, що триває три четвертих секунди і ми встановили його початок на 1.75 секунди, після завершення попередніх анімацій. Знову ми використовуємо animation-fill-mode: forwards;, щоб переконатися, що opacity елементів залишається на 1, а не переходить на значення по замовчуванню - 0.

Коли секвенція буде готовою, ви повинні бачити наступне:

World Mental Health Day 2018 final animation

Тепер створимо появу основного тексту. У нас уже є стиль #wmhd в документі, тому оновіть його ось так:

Ми використовуємо такий же код, як і для елемента #ribbon, просто вказуємо затримку (delay) на 2.25 секунди, щоб елемент дещо похитувався.

Тепер ваша анімація повинна виглядати ось так:

World Mental Health Day 2018 finish state

На кінець, нам потрібно створити появу дати, тому оновіть існуючий стиль #date:

Знову ж таки, єдине що змінюється, це стартова точка анімації.

Підведемо підсумки

З останнім фрагментом коду ми завершили нашу анімацію і в кінці вона повинна виглядати наступним чином:

World Mental Health Day 2018 complete clasping hands animation

Для більш детальної інформації щодо Міжнародного дня психічного здоров'я відвідайте сайт WHO.

Дізнайтесь все про CSS анімацію:

Find Out More About SVG Animation:


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.