Красивая сцена с применением CSS анимации

Идея данного урока заключается в том, чтобы создать небольшую сцену, используя CSS анимацию, фильтры и прочие фишки. Данный урок - это просто эксперимент.

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

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

Прошу обратить внимание, что данный урок - это просто эксперимент.

Теперь давайте поместим каждую букву в отдельный span элемент. Сделаем это динамически, с помощью jQuery:

$("#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%;
    /* 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;
}

Также нам нужно задать значение задержкам, которые будут активироваться между появлением разных фраз. Первые предложения будут сменяться медленнее, а последние - быстрее.

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

Во время анимации мы зададим тень буквам, чтобы придать размытый эффект. Также буквы будут повёрнуты по оси Y. Также поиграемся с чёткостью букв.

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

Вот и всё. Можем смотреть на то, что получилось.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/mq-j5waymYw/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Красивая сцена с применением CSS анимации | | 2013-06-16 01:39:15 | | Статьи Web-мастеру | | Идея данного урока заключается в том, чтобы создать небольшую сцену, используя CSS анимацию, фильтры и прочие фишки. Данный урок - это просто эксперимент.Для начала нам понадобится набор предложений, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: