Създайте анимиран 3D текстов ефект

Изгубена любов от Канада Конфитюр3 е красиво тъмно, готово за мобилни устройства интерактивно стихотворение с истинско сърце за трайните чувства около изгубената любов. The оформление на уебсайта е създаден с помощта на HTML5 с GSAP библиотека, захранваща анимацията му, една от най-впечатляващите й визуални характеристики е анимираният 3D текст, който наистина оживява поезията на Love Lost.



  • Направете интерактивни 3D типографски ефекти

Изглежда адски впечатляващо и не е трудно да се включи в собствената си работа, за да създадеш ангажираща потребителски опит ; ето как се прави.



Изгубена любов

3D текстът на Love Lost излиза веднага от екрана при зрителя

01. Инициирайте HTML документа

Първата стъпка е да се определи структурата на HTML документа. Това включва HTML контейнера, който инициира документа, който съдържа главите и тялото. Докато секцията head се използва предимно за зареждане на външен CSS файл, секцията body ще съхранява видимото съдържание на страницата, създадено в стъпка 2.



3D Text Movement *** STEP 2 HERE

02. Видимо HTML съдържание

Видимото HTML съдържание се състои от контейнер за статии, който съдържа видимия текст. Важната част на контейнера за статии е атрибутът „data-animate“, на който CSS ще препраща, за да приложи визуалните ефекти. Текстът в статията е направен от таг h1, за да покаже, че съдържанието е основното заглавие на страницата.

Hello There!

03. CSS иницииране

Създайте нов файл, наречен 'styles.css'. Първият набор от инструкции задава HTML контейнера и тялото на страницата да имат черен фон, както и без видими разстояния между границите. Бялото също е зададено като цвят на текста по подразбиране за всички наследствени елементи на страницата; избягване на черния цвят на текста по подразбиране, като съдържанието изглежда невидимо.

html, body{ background: #000; padding: 0; margin: 0; color: #fff; }

04. Анимационен контейнер

Контейнерът за съдържание, посочен с атрибута 'data-animate', има приложени специфични стилове. Размерът му е настроен да съответства на пълния размер на екрана с помощта на vw и vh мерни единици, както и леко завъртане. Прилага се анимация, наречена „moveIn“, която ще продължи 20 секунди и ще се повтаря безкрайно.





[data-animate='move in']{ position: relative; width: 100vw; height: 100vh; opacity: 1; animation: moveIn 20s infinite; text-align: center; transform: rotate(20deg); }

05. Иницииране на анимация

Анимацията 'moveIn', посочена в предишната стъпка, изисква дефиниция, използваща @keyframes. Първият кадър, започващ от 0% от анимацията, задава размера на шрифта по подразбиране, позиционирането на текста и видимата сянка. Освен това елементът се задава с нулева непрозрачност, така че първоначално да е невидим - т.е. показвани извън видимостта.



@keyframes moveIn { 0%{ font-size: 1em; left: 0; opacity: 0; text-shadow: none; } *** STEP 6 HERE }

06. Анимирайте в погледа

С помощта на множество сенки можете да подобрите 3D ефекта

С помощта на множество сенки можете да подобрите 3D ефекта

Следващият кадър се поставя на 10% чрез анимацията. Този кадър задава непрозрачността на напълно видима, в резултат на което текстът постепенно се анимира. Освен това се добавят множество сенки със сини и намаляващи стойности на цвета, за да се придадат илюзии за 3D дълбочина на текста.



10% { opacity: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px #777, .6em -.6em 4px #444, .8em -.8em 4px #111; } *** STEP 7 HERE

07. Финализиране на анимацията

Крайните кадри се случват при 80% и в самия край на анимацията. Те са отговорни за увеличаването на размера на шрифта и преместването на елемента вляво. Прилагат се и нови настройки за анимиране на сянката на текста, като същевременно избледнява текста от погледа от кадри 80% на 100%.

80%{ font-size: 8em; left: -8em; opacity: 1; } 100%{ font-size: 10em; left: -10em; opacity: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px #777, .06em -.06em 4px #444, .08em -.08em 4px #111; } ***

Тази статия първоначално е публикувана в брой 273 на списанието за уеб дизайн за уеб дизайн. Купете брой 273 тук или абонирайте се за Web Designer тук .

Свързани статии: