Съдържание
- 01. Инициирайте HTML документа
- 02. Видимо HTML съдържание
- 03. CSS иницииране
- 04. Контейнер за анимация
- 05. Иницииране на анимация
- 06. Анимирайте в погледа
- 07. Финализиране на анимацията
Love Lost by Canada’s Jam3 е красиво тъмно, готово за мобилни устройства интерактивно стихотворение с истинско сърце за трайните чувства около изгубената любов. Оформлението на уебсайта е изградено с помощта на HTML5 с библиотека GSAP, задвижваща анимацията му, една от най-впечатляващите му визуални характеристики е анимираният му 3D текст, който наистина оживява поезията на Love Lost.
- Направете интерактивни 3D типографски ефекти
Изглежда впечатляващо по дяволите и не е трудно да включите в собствената си работа, за да създадете увлекателно потребителско изживяване; ето как се прави.
Искате да направите свой собствен ангажиращ сайт? Опитайте инструмент за създаване на уебсайтове и поддържайте нещата да работят гладко, като изберете правилната услуга за уеб хостинг.
01. Инициирайте HTML документа
Първата стъпка е да се определи структурата на HTML документа. Това включва HTML контейнера, който инициира документа, който съдържа главите и тялото. Докато секцията head се използва предимно за зареждане на външния CSS файл, тялото ще съхранява видимото съдържание на страницата, създадено в стъпка 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 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 {фон: # 000; подплата: 0; марж: 0; цвят: #fff; }
04. Контейнер за анимация
Контейнерът за съдържание, посочен с атрибута „data-animate“, има приложени специфични стилове. Размерът му е настроен да съответства на пълния размер на екрана с помощта на vw и vh мерни единици, както и леко завъртян. Прилага се анимация, наречена „moveIn“, която ще продължи 20 секунди и ще се повтаря безкрайно.
[data-animate = "move in"] {позиция: относителна; ширина: 100vw; височина: 100vh; непрозрачност: 1; анимация: moveIn 20s infinite; подравняване на текст: център; трансформиране: завъртане (20 градуса); }
05. Иницииране на анимация
Анимацията ’moveIn’, посочена в предишната стъпка, изисква дефиниция, използваща @keyframes. Първият кадър, започващ от 0% от анимацията, задава размера на шрифта по подразбиране, позиционирането на текста и видимата сянка. Освен това елементът е зададен с нулева непрозрачност, така че първоначално да е невидим - т.е. показвани извън полезрението.
@keyframes moveIn {0% {font-size: 1em; ляво: 0; непрозрачност: 0; text-shadow: няма; } * * * СТЪПКА 6 ТУК}
06. Анимирайте в погледа
Следващият кадър се поставя на 10% чрез анимацията. Този кадър задава непрозрачността на напълно видима, в резултат на което текстът постепенно се анимира.Освен това се добавят множество сенки със сини и намаляващи стойности на цвета, за да се придадат илюзии за 3D дълбочина на текста.
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 на списанието за уеб дизайн за уеб дизайн. Купете брой 273 тук или абонирайте се за Web Designer тук.
