Зміст
- 01. Ініціюйте документ HTML
- 02. Видимий вміст HTML
- 03. Ініціація CSS
- 04. Анімаційний контейнер
- 05. Ініціювання анімації
- 06. Анімація в поле зору
- 07. Завершення анімації
Love Lost by Canada3 Jam3 - це чудово темний інтерактивний вірш із справжнім серцем про незмінні почуття навколо загубленого кохання. Макет веб-сайту був побудований з використанням HTML5, а бібліотека GSAP забезпечує його анімацію. Однією з найбільш вражаючих його візуальних особливостей є анімований 3D-текст, який справді оживляє поезію Love Lost.
- Зробіть інтерактивні ефекти 3D-друкарні
Це виглядає вражаюче, і його не складно включити у власну роботу, щоб створити привабливий досвід користувачів; ось як це робиться.
Хочете зробити свій власний цікавий сайт? Спробуйте інструмент конструктора веб-сайтів і продовжуйте працювати без проблем, вибравши відповідну послугу веб-хостингу.
01. Ініціюйте документ HTML
Першим кроком є визначення структури документа HTML. Сюди входить HTML-контейнер, який ініціює документ, який містить розділи head і body. Хоча розділ заголовка в основному використовується для завантаження зовнішнього файлу CSS, розділ тіла зберігатиме видимий вміст сторінки, створений на кроці 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * КРОК 2 ТУТ / body> / html>
02. Видимий вміст HTML
Видимий вміст HTML складається з контейнера статті, який містить видимий текст. Важливою частиною контейнера статті є атрибут 'data-animate', на який посилається CSS для застосування візуальних ефектів. Текст у статті зроблений за допомогою тегу h1, що вказує на те, що вміст є головною назвою сторінки.
article data-animate = "move in"> h1> Привіт! / h1> / article>
03. Ініціація CSS
Створіть новий файл із назвою „styles.css“. Перший набір інструкцій встановлює чорний фон, а також відсутність проміжків між межами HTML-контейнера та тексту сторінки. Білий також встановлюється як колір тексту за замовчуванням для всіх дочірніх елементів на сторінці, які слід успадкувати; уникаючи чорного кольору тексту за замовчуванням, завдяки чому вміст здається невидимим.
html, body {background: # 000; заповнення: 0; запас: 0; колір: #fff; }
04. Анімаційний контейнер
Контейнер вмісту, на який посилається атрибут „data-animate”, застосовує певні стилі. Його розмір встановлений так, щоб він відповідав повному розміру екрана за допомогою одиниць вимірювання vw та vh, а також злегка повертався. Застосовується анімація "moveIn", яка триватиме 20 секунд і повторюватиметься нескінченно.
[data-animate = "move in"] {позиція: відносна; ширина: 100vw; висота: 100vh; непрозорість: 1; анімація: рухатись у 20-х нескінченно; вирівнювання тексту: по центру; перетворення: обертати (20deg); }
05. Ініціювання анімації
Анімація 'moveIn', на яку посилається попередній крок, вимагає визначення за допомогою @keyframes. Перший кадр, починаючи з 0% анімації, встановлює розмір шрифту за замовчуванням, розташування тексту та видиму тінь. Крім того, елемент встановлюється з нульовою непрозорістю, так що він спочатку не видно - тобто. відображається поза полем зору.
@keyframes moveIn {0% {font-size: 1em; ліворуч: 0; непрозорість: 0; text-shadow: немає; } * * * КРОК 6 ТУТ}
06. Анімація в поле зору
Наступний кадр розміщується на рівні 10% за допомогою анімації. Цей кадр встановлює прозорість повністю видимою, в результаті чого текст поступово анімується.Крім того, додаються декілька тіней із синім та зменшенням кольорових значень, що створює ілюзію тривимірної глибини тексту.
10% {непрозорість: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * КРОК 7 ТУТ
07. Завершення анімації
Кінцеві кадри відбуваються на рівні 80% і в самому кінці анімації. Вони відповідають за збільшення розміру шрифту та переміщення елемента вліво. Також застосовуються нові налаштування для анімування тіні тексту, а також зменшення тексту з поля зору від кадрів 80% до 100%.
80% {розмір шрифту: 8em; ліворуч: -8em; непрозорість: 1; } 100% {розмір шрифту: 10em; ліворуч: -10em; непрозорість: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Примітка. Незалежно від того, з яким проектом ви беретесь, наявність хмарного сховища, яке може впоратися, є надзвичайно важливим (наш посібник допоможе).
Ця стаття спочатку була опублікована у випуску 273 журналу творчого веб-дизайну Web Designer. Придбайте випуск 273 тут або підпишіться на веб-дизайнер тут.
