Сегодня мы хотим рассказать вам о том, как сделать небольшой текстовый эффект при помощи css-анимации и тени текста. Возможно, вы уже встречались с подобной анимацией текста при просмотре, к примеру, трейлеров к фильмам. После просмотра Introducing Briefs (это, конечно, не трейлер к фильму, но превью к очень интересному приложению), мы вдохновились на воссоздание подобного эффекта при помощи CSS.
Суть заключается в том, чтобы размывать текст, который появляется по частям, а также в создании анимации будто движущегося текста. Всего этого можно добиться при помощи новых css-фильтров, применив анимацию к отступам и полям. Сегодня мы собираемся воспользоваться тенью текста и свойством letter-spacing, чтобы добиться желаемого эффекта. Так как нам нужно контролировать каждый символ, мы воспользуемся Lettering.js от Dave Rupert, чтобы облачить слова и символы в раздельные span-элементы.
Итак, давайте приступим.
Примечание: этот эксперимент будет работать только в тех браузерах, где имеется поддержка соответствующих CSS-свойств.
Суть заключается в том, чтобы у нас было несколько предложений текста, которые появляются одно за другим, как уже было описано выше, поэтому нам нужно обернуть каждое предложение в H2:
Sometimes it's better
to hide
in order to
survive evil
Thanatos
This fall
Prepare
Refresh to replay
Помните о том, что это просто экспериментальный эффект, поэтому давайте не будем строго судить предложенную разметку.Теперь наши предложения на своих местах, и давайте попробуем применить lettering, чтобы обернуть каждое слово и букву в отдельный span. Нам нужно, чтобы буква была обернута в два span-элемента, так как нам нужно будет использовать перспективу на каждой букве. Итак, давайте все-таки сделаем это:
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();Это приведет нас к следующей безумной структуре:
S o m
Конечно же, сильно наседать не нужно, но здесь необходимо довольно тщательно подойти к вращениям: нам нужно, чтобы оно происходило в перспективе. Вращение текста без перспективы не даст нужного эффекта, а мы хотим, чтобы все было замечательно. Если мы уже используем 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-я части следуют друг за другом довольно быстро. 
.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, чтобы они предстали прямо перед нами. 
Последний же этап заключается в том, что мы затемняем буквы, и слегка их увеличиваем, снова добавляя размытости:
@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;
}И на этом все! Надеемся, что вам понравилось данное руководство!Исходники в архиве…