Содержание
- 01. Запустите HTML-документ.
- 02. Видимый HTML-контент
- 03. Запуск CSS
- 04. Анимационный контейнер
- 05. Запуск анимации
- 06. Анимация в поле зрения
- 07. Доработка анимации.
Love Lost by Canada’s Jam3 - это красивое мрачное интерактивное стихотворение, готовое для мобильных устройств, с искренним сердцем о непреходящих чувствах, связанных с потерянной любовью. Макет веб-сайта был построен с использованием HTML5 с библиотекой GSAP, обеспечивающей его анимацию. Одной из самых ярких особенностей является анимированный трехмерный текст, который действительно воплощает в жизнь поэзию Love Lost.
- Создавайте интерактивные эффекты 3D-типографики
Это выглядит чертовски впечатляюще, и его несложно включить в свою работу, чтобы создать интересный пользовательский интерфейс. вот как это делается.
Хотите создать свой собственный привлекательный сайт? Попробуйте инструмент для создания веб-сайтов и обеспечьте бесперебойную работу, выбрав правильный веб-хостинг.
01. Запустите HTML-документ.
Первый шаг - определить структуру HTML-документа. Сюда входит HTML-контейнер, который инициирует документ, содержащий разделы head и body. В то время как раздел head в основном используется для загрузки внешнего файла CSS, в разделе body будет храниться видимое содержимое страницы, созданное на шаге 2.
! DOCTYPE html> html> head> title> Перемещение / заголовок 3D-текста> 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 = "двигаться внутрь"] {позиция: относительная; ширина: 100ввт; высота: 100vh; непрозрачность: 1; анимация: moveIn 20s бесконечность; выравнивание текста: центр; преобразовать: повернуть (20 градусов); }
05. Запуск анимации
Анимация 'moveIn', упомянутая в предыдущем шаге, требует определения с помощью @keyframes. Первый кадр, начинающийся с 0% анимации, устанавливает размер шрифта по умолчанию, положение текста и видимую тень. Кроме того, элементу задается нулевая непрозрачность, поэтому он изначально невидим, т. Е. отображается вне поля зрения.
@keyframes moveIn {0% {font-size: 1em; слева: 0; непрозрачность: 0; тень текста: нет; } * * * ШАГ 6 ЗДЕСЬ}
06. Анимация в поле зрения
Следующий кадр размещается на 10% через анимацию. Этот фрейм устанавливает прозрачность как полностью видимую, в результате чего текст постепенно становится видимым.Кроме того, добавлены несколько теней с синим цветом и уменьшающимися значениями цвета, чтобы придать тексту иллюзию трехмерной глубины.
10% {непрозрачность: 1; тень текста: .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; тень текста: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Примечание. Независимо от того, какой проект вы реализуете, важно иметь облачное хранилище, способное справиться с ним (наше руководство поможет).
Эта статья была первоначально опубликована в 273-м выпуске журнала о креативном веб-дизайне Web Designer. Купите выпуск 273 здесь или же подпишитесь на Web Designer здесь.
