Тег <marquee> создает на экране перемещающийся объект по принципу бегущей строки. Изначально тег был создан для Internet Explorer. Сегодня мы вспомним этот (вероятно, забытый многими) тег и научимся с его помощью создавать анимированную строку на чистом css3.

*Перед началом выполнения урока рекомендуем прочесть мастеркласс по CSS анимации 

Проблема

Одна из проблем, с <marquee>  в том, что текст находится в непрерывном движении, поэтому читать его очень сложно. На этот раз, мы будем стараться создать нашу собственную версию <marquee> и сделать её более юзабильной. Например, вместо того, чтобы текст двигался непрерывно, мы остановим его на минуту, когда он полностью виден, так чтобы пользователь мог полностью прочитать его.

Начало работы

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

Чтобы понять, как это будет реализовано, посмотрите следующие демонстрации:

Демо1 | Демо2

Разметка HTML

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

<div class="marquee">
        <p>How to add WordPress Related Posts Without Plugins</p>
        <p>Automate Your <a href="http://www.hongkiat.com/blog/out/dropbox" style=""  rel="nofollow" onmouseover="self.status='http://www.hongkiat.com/blog/out/dropbox';return true;" onmouseout="self.status=''">Dropbox</a> Files With Actions</p>
    </div>

Основные стили

Перед тем, как создавать анимацию, давайте добавим основные стили. Начнём с добавления фона для html-элементов.

html {
        background: url('../images/skewed_print.png');
    }

Теперь разместим нашу строку посредине окна браузера и добавим некоторые детали, такие как внутренняя тень, цвет фона и контуры.

.marquee {
        width: 500px;
        height: 50px;
        margin: 25px auto;
        overflow: hidden;
        position: relative;
        border: 1px solid #000;
        margin: 25px auto;

        background-color: #222;  

      -webkit-border-radius: 5px;
      border-radius: 5px;  
      -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
      box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
    }

Теперь выровняем наш текст – добавим абсолютное позиционирование и установим  100% ширину и высоту.

.marquee p {
        position: absolute;
        font-family: Tahoma, Arial, sans-serif;
        width: 100%;
        height: 100%;
        margin: 0;
        line-height: 50px;
        text-align: center;
        color: #fff;
      text-shadow: 1px 1px 0px #000000;
      filter: dropshadow(color=#000000, offx=1, offy=1);
    }

У нас должен получиться следующий результат:

Анимация

При создании анимации вы должны ответить себе на следующие вопросы:

• Когда будет начинаться анимация?
• Как долго будет перемащаться объект от одной точки к другой?
• Как долго должен оставаться объект в данной точке?

В CSS3-анимации,  время будет установлено при помощи синтаксиса @keyframe. Но давайте для начала определимся с стартовой позицией текста.

Мы решили, что текст будет появляться справа и двигаться вправо, поэтому установим ему следующее значение

.marquee p {
        transform:translateX(100%);
    }

Ключевые кадры

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

Нажмите, чтобы  увеличить изображение.

Вся анимация будет длиться около 20 секунд, и делится на два события по 10 секунд каждое.

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

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

@keyframes left-one {
        0%  {
            transform:translateX(100%);
        }
        10% {
            transform:translateX(0);
        }
        40% {
            transform:translateX(0);
        }
        50% {
            transform:translateX(-100%);
        }
        100%{
            transform:translateX(-100%);
        }
    }
    @keyframes left-two {
        0% {
            transform:translateX(100%);
        }
        50% {
            transform:translateX(100%);
        }
        60% {
            transform:translateX(0);
        }
        90% {
            transform:translateX(0);
        }
        100%{
            transform:translateX(-100%);
        }
    }

Применение анимации к элементам

Первая последовательность применяется для первого текста (в данном случае первый параграф) и вторая последовательности применяется для второго параграфа.

.marquee p:nth-child(1) {
        animation: left-one 20s ease infinite;
    }
    .marquee p:nth-child(2) {
        animation: left-two 20s ease infinite;
    }

Демо

Бонус

Мы также можем изменить направление текста бегущей строки, например сверху вниз или наоборот. Вот как это можно реализовать:

.marquee p {
        transform:translateY(-100%);
    }
    @keyframes down-one {
        0%  {
            transform:translateY(-100%);
        }
        10% {
            transform:translateY(0);
        }
        40% {
            transform:translateY(0);
        }
        50% {
            transform:translateY(100%);
        }
        100%{
            transform:translateY(100%);
        }
    }
    @keyframes down-two {
        0% {
            transform:translateY(-100%);
        }
        50% {
            transform:translateY(-100%);
        }
        60% {
            transform:translateY(0);
        }
        90% {
            transform:translateY(0);
        }
        100%{
            transform:translateY(100%);
        }
    }

Кроме того, мы переименовали нашу анимацию, так что мы должны повторно применить  имя анимации в пункте элемента.

.marquee p:nth-child(1) {
        animation: down-one 20s ease infinite;
    }
    .marquee p:nth-child(2) {
        animation: down-two 20s ease infinite;
    }

Ну и наконец, вот весь код:

.marquee.up p {
        transform:translateY(100%);
    }
    .marquee.up p:nth-child(1) {
        animation: up-one 20s ease infinite;
    }
    .marquee.up p:nth-child(2) {
        animation: up-two 20s ease infinite;
    }
    @keyframes up-one {
        0%  {
            transform:translateY(100%);
        }
        10% {
            transform:translateY(0);
        }
        40% {
            transform:translateY(0);
        }
        50% {
            transform:translateY(-100%);
        }
        100%{
            transform:translateY(-100%);
        }
    }
    @keyframes up-two {
        0% {
            transform:translateY(100%);
        }
        50% {
            transform:translateY(100%);
        }
        60% {
            transform:translateY(0);
        }
        90% {
            transform:translateY(0);
        }
        100%{
            transform:translateY(-100%);
        }
    }

Демо

Заключение

Несмотря на отсутствие текущей поддержки браузерами, CSS3 анимация ( если все сделано правильно)  несомненно, будет решать многие вопросы удобства использования в будущем. Если нам нужно только короткие анимации предназначены для современных браузеров, использование CSS3-анимация, вероятно, лучше, чем загрузка JQuery-сценария.

Автор — hongkiat

Перевод — Дежурка