html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создаем анимированную строку

Тег <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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

29
    +11 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sobeninaolga
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции