Поворот слов с помощью CSS-анимации

27 ноября 2013 | Опубликовано в css | 1 Комментарий »

Сегодня нас ждет урок, в котором мы научимся создавать очень красивый эффект. Он понравится креативным разработчикам, которым хочется добавить изюминку своему веб-творению. Мы создадим эффект оформления текста. Суть в том, что у нас есть предложение, и нам нужно поворачивать его часть. Мы будем заменять определенные слова из этого предложения, используя CSS-анимацию.

Демо – Исходный код

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

Итак, начнем!

В дальнейшем, мы будем рассматривать пример 2.

Разметка

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

<section class="rw-wrapper">

    <h2 class="rw-sentence">

        <span>Real poetry is like</span>

        <span>creating</span>

        <div class="rw-words rw-words-1">

            <span>breathtaking moments</span>

            <span>lovely sounds</span>

            <span>incredible magic</span>

            <span>unseen experiences</span>

            <span>happy feelings</span>

            <span>beautiful butterflies</span>

        </div>

        <br />

        <span>with a silent touch of</span>

        <div class="rw-words rw-words-2">

            <span>sugar</span>

            <span>spice</span>

            <span>colors</span>

            <span>happiness</span>

            <span>wonder</span>

            <span>happiness</span>

        </div>

    </h2>
</section>

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

Итак, давайте посмотрим на CSS.

CSS3

Сначала мы оформим главный контейнер и отцентрируем его на странице:

.rw-wrapper{

    width: 80%;

    position: relative;

    margin: 110px auto 0 auto;

    font-family: 'Bree Serif';

    padding: 10px;
}

Мы добавим тень к тексту ко всем элементам в заголовке:

.rw-sentence{

    margin: 0;

    text-align: left;

    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

И добавим определенный стиль тексту в тэге span:

.rw-sentence span{

    color: #444;

    white-space: nowrap;

    font-size: 200%;

    font-weight: normal;
}

Блоки будут показаны как строчные элементы, что позволит «вставить» их в предложение, не разбивая его:

.rw-words{

    display: inline;

    text-indent: 10px;
}

Каждый тэг span в блоке rw-words будет абсолютно спозиционирован и скроет все, что не поместится:

.rw-words span{
    position: absolute;

    opacity: 0;

    overflow: hidden;

    width: 100%;

    color: #6b969d;
}

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

.rw-words-1 span{
    animation: rotateWordsFirst 18s linear infinite 0s;

}

.rw-words-2 span{

    animation: rotateWordsSecond 18s linear infinite 0s;

}

.rw-words span:nth-child(2) {

    animation-delay: 3s;

    color: #6b889d;

}

.rw-words span:nth-child(3) {

    animation-delay: 6s;

    color: #6b739d;

}

.rw-words span:nth-child(4) {

    animation-delay: 9s;

    color: #7a6b9d;

}

.rw-words span:nth-child(5) {

    animation-delay: 12s;

    color: #8d6b9d;

}

.rw-words span:nth-child(6) { 

    animation-delay: 15s;

    color: #9b6b9d;
}

Наши анимации выполнятся один раз, что означает, что каждый тэг span будет показан один раз на три секунды, не зависимо от значения задержки. Вся анимация будет выполнятся 6 (количество изображений) х 3 (время, на которое появится изображение) = 18 секунд.

Нам будет нужно выставить правильный процент для значения прозрачности, или того, что заставит тэг span появиться. Деление 6 на 18 дает нам 0.333… т.е., 33% для нашего шага ключевых кадров. Все, что мы хотим, чтобы произошло с тэгом span, должно произойти до этого момента. Итак, после подстройки и выяснения, что лучше подходит, мы получаем следующую анимацию для первых слов:

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }

    8% { opacity: 1; height: 60px; }

    19% { opacity: 1; height: 60px; }

    25% { opacity: 0; height: 60px; }

    100% { opacity: 0; }
}

Мы заставим тэг span исчезнуть, а так же анимируем его высоту.

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

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }

    10% { opacity: 0.3; width: 0px; }

    20% { opacity: 1; width: 100%; }

    27% { opacity: 0; width: 100%; }

    100% { opacity: 0; }
}