Lecaw

Учимся создавать Web-сайты

Плавное появление текста с помощью CSS анимации / CSS эффект текста

May 17, 2013
CSS
1472hits

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

ДЕМО Исходные файлы

 

Идея состоит в том, чтобы размыть текст и сделать так, чтобы он появлялся с вращением, анимируя пространство между буквами. Это можно реализовать различными способами, используя некоторые свойства, такие как новые CSS filters, animating padding или margin и многое другое. Здесь мы просто будем использовать свойства text-shadow и letter-spacing для достижения желаемого CSS эффекта текста. Так как нам нужно будет контролировать каждую букву, мы будем использовать Lettering.js от Dave Rupert’s чтобы добавить слова и промежутки в оболочку.

Идея состоит в том, чтобы несколько фраз исчезали с вышеупомянутым 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>

Теперь когда в нашем распоряжении есть отдельные блоки с текстом, давайте добавим каждое слово и промежутки в оболочку. Фактически, мы будем использовать каждую букву, которая будет установлена с двумя промежутками.

$("#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.

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

.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%;
    /* размещаем по центру при помощи flexbox */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

Давайте добавим некоторые промежутки между словами:

.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.

Посредством анимации, мы увеличим резкость букв и уменьшим межсимвольный интервал до 14px, увеличим непрозрачность и повернем их так, чтобы мы могли полностью их увидеть.

На последнем шаге буквы будут постепенно исчезать и изменятся в масштабе:

@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;
    }
}

Наконец, что не менее важно, мы добавим акцент на определенные слова, делая их полужирными:

/* Полужирные слова */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
    font-weight: 600;
}

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(3 голосов)

Оставить комментарий