—»     —»   Анимация с появлением текста на CSS Animations
  Раздел: Анимация, Руководства   Нет комментариев  

Анимация с появлением текста на CSS Animations



Сегодня мы хотим рассказать вам о том, как сделать небольшой текстовый эффект при помощи css-анимации и тени текста. Возможно, вы уже встречались с подобной анимацией текста при просмотре, к примеру, трейлеров к фильмам. После просмотра Introducing Briefs (это, конечно, не трейлер к фильму, но превью к очень интересному приложению), мы вдохновились на воссоздание подобного эффекта при помощи CSS.

Анимация с появлением текста на CSS Animations

Суть заключается в том, чтобы размывать текст, который появляется по частям, а также в создании анимации будто движущегося текста. Всего этого можно добиться при помощи новых css-фильтров, применив анимацию к отступам и полям. Сегодня мы собираемся воспользоваться тенью текста и свойством letter-spacing, чтобы добиться желаемого эффекта. Так как нам нужно контролировать каждый символ, мы воспользуемся Lettering.js от Dave Rupert, чтобы облачить слова и символы в раздельные span-элементы.

Итак, давайте приступим.

Примечание: этот эксперимент будет работать только в тех браузерах, где имеется поддержка соответствующих CSS-свойств.

Суть заключается в том, чтобы у нас было несколько предложений текста, которые появляются одно за другим, как уже было описано выше, поэтому нам нужно обернуть каждое предложение в H2:

<div class="os-phrases">
<h2>Sometimes it's better</h2>
<h2>to hide</h2>
<h2>in order to</h2>
<h2>survive evil</h2>
<h2>Thanatos</h2>
<h2>This fall</h2>
<h2>Prepare</h2>
<h2>Refresh to replay</h2>
</div>

Помните о том, что это просто экспериментальный эффект, поэтому давайте не будем строго судить предложенную разметку.

Теперь наши предложения на своих местах, и давайте попробуем применить lettering, чтобы обернуть каждое слово и букву в отдельный span. Нам нужно, чтобы буква была обернута в два span-элемента, так как нам нужно будет использовать перспективу на каждой букве. Итак, давайте все-таки сделаем это:

$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();

Это приведет нас к следующей безумной структуре:

<div class="os-phrases" id="os-phrases">
<h2>
<span class="word1">
<span class="char1">
<span class="char1">
S
</span>
</span>
<span class="char2">
<span class="char1">
o
</span>
</span>
<span class="char3">
<span class="char1">
m
</span>
</span>
<!-- ... -->
</span> <!-- /word1 -->
<!-- ... -->
</h2>
<h2>
<!-- ... -->
</h2>
<!-- ... -->
</div>

Конечно же, сильно наседать не нужно, но здесь необходимо довольно тщательно подойти к вращениям: нам нужно, чтобы оно происходило в перспективе. Вращение текста без перспективы не даст нужного эффекта, а мы хотим, чтобы все было замечательно. Если мы уже используем lettering.js, то есть смысл пройти этот путь до конца.

Теперь, когда мы разобрались с этим адом из оболочек в виде span-элементов, давайте используем его для стилизации вложенных букв.

Учтите, что CSS не содержит браузерных префиксов здесь, но в исходный файлах вы их увидите.

Наш заголовок будет позиционирован на экране абсолютно, занимая все пространство:

.os-phrases h2 {
font-family: 'Dosis', 'Lato', sans-serif;
font-size: 70px;
font-weight: 200;
height: 100%;
width: 100%;
overflow: hidden;
text-transform: uppercase;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
letter-spacing: 14px;
text-align: center;
}

Нам нужно, чтобы наши предложения не оборачивали его, а были расположены по центру экрана, как по вертикали, так и по горизонтали. Как мы реализуем это? Правильно, для этого мы воспользуемся flexbox:

.os-phrases h2,
.os-phrases h2 > span {
height: 100%;
/* Centering with flexbox */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

Учтите, что стандартное значение для flex-wrap – это nowrap, которое и представляет собой то, что нам нужно.
Это позволит нам красиво центрировать предложения.

Теперь давайте добавим немного пространства между словами:

.os-phrases h2 > span {
margin: 0 15px;
}

Первая оболочка для буквы будет иметь перспективу:

.os-phrases h2 > span > span {
display: inline-block;
perspective: 1000px;
transform-origin: 50% 50%;
}

Сами буквы будут прозрачны, и к ним мы применим анимацию. Длительность анимации составляет 5.2 секунды.

.os-phrases h2 > span > span > span {
display: inline-block;
color: hsla(0,0%,0%,0);
transform-style: preserve-3d;
transform: translate3d(0,0,0);
animation: OpeningSequence 5.2s linear forwards;
}

Перед тем, как перейти к анимациям, давайте сразу определим задержки для частей предложения. 5-я часть предложения – та, в которой у нас присутствует заголовок фильма «Thanatos», будет особенной, и поэтому она будет появляться немного дольше и позже. 6-я и 7-я части следуют друг за другом довольно быстро.

Анимация с появлением текста на CSS Animations

.os-phrases h2:nth-child(2) > span > span > span {
animation-delay: 5s;
}

.os-phrases h2:nth-child(3) > span > span > span {
animation-delay: 10s;
}

.os-phrases h2:nth-child(4) > span > span > span {
animation-delay: 15s;
}

.os-phrases h2:nth-child(5) > span > span > span {
font-size: 150px;
animation-delay: 21s;
animation-duration: 8s;
}

.os-phrases h2:nth-child(6) > span > span > span {
animation-delay: 30s;
}

.os-phrases h2:nth-child(7) > span > span > span {
animation-delay: 34s;
}

И последней части мы зададим особенную анимацию, но давайте сначала взглянем на базовую.

В этой анимации нам сначала нужно, чтобы text-shadow немного размыл буквы. Межбуквенный пробел будет большим, и буквы будут вращаться по оси Y, поэтому мы будем видеть всего лишь кусочек. Уровень непрозрачности установлен на 0.2.

На половине анимации мы добавляем резкости буквам и понижаем межбуквенный пробел до 14 пикселей, увеличиваем уровень непрозрачности, и вращаем буквы до 0, чтобы они предстали прямо перед нами.

Анимация с появлением текста на CSS Animations

Последний же этап заключается в том, что мы затемняем буквы, и слегка их увеличиваем, снова добавляя размытости:

@keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
transform: translateZ(130px);
pointer-events: none;
}
}

Наша последняя часть предложения будет обозначена другой анимацией, которая просто отобразит нам текст и оставит его в таком положении:

.os-phrases h2:nth-child(8) > span > span > span {
font-size: 30px;
animation: FadeIn 4s linear 40s forwards;
}

@keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}

Последнее, но не менее важное заключается в том, чтобы добавить акценты на определенные слова, выделив их полужирным шрифтом:

/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
font-weight: 600;
}

И на этом все! Надеемся, что вам понравилось данное руководство!

Посмотреть демо | Скачать исходники
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 11786   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2017    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031