Задаволены
- 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 у асноўным выкарыстоўваецца для загрузкі вонкавага файла CSS, у раздзеле body будзе захоўвацца бачнае змесціва старонкі, створанае на этапе 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 {фон: # 000; пракладка: 0; запас: 0; колер: #fff; }
04. Анімацыйны кантэйнер
Кантэйнер змесціва, на які спасылаецца атрыбут "data-animate", ужывае пэўныя стылі. Яго памер усталёўваецца ў адпаведнасці з поўным памерам экрана з выкарыстаннем адзінак вымярэння vw і vh, а таксама злёгку паварочваецца. Прымяняецца анімацыя пад назвай "moveIn", якая будзе доўжыцца 20 секунд і будзе паўтарацца бясконца.
[data-animate = "рухацца"] {пазіцыя: адносна; шырыня: 100vw; вышыня: 100vh; непразрыстасць: 1; анімацыя: рухаццаЗ 20-х гадоў бясконца; выраўноўванне па тэксце: па цэнтры; пераўтварэнне: паварот (20deg); }
05. Ініцыяцыя анімацыі
Для анімацыі "moveIn", на якую спасылаецца папярэдні этап, патрабуецца вызначэнне з выкарыстаннем @keyframes. Першы кадр, пачынаючы з 0% анімацыі, усталёўвае памер шрыфта, пазіцыянаванне тэксту і бачны цень па змаўчанні. Акрамя таго, элемент усталёўваецца з нулявой непразрыстасцю, так што ён першапачаткова не бачны - г.зн. выводзіцца з поля зроку.
@keyframes moveIn {0% {font-size: 1em; злева: 0; непразрыстасць: 0; тэкст-цень: няма; } * * * КРОК 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 часопіса "Крэатыўны вэб-дызайн" Web Designer. Купіце выпуск 273 тут альбо падпішыцеся на Web Designer тут.
