Анимация текста

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

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

Итак, давайте начнем! В уроке мы рассмотрим пример из Demo 2.

HTML-разметка

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

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

Слова внутри блока с классом rw-words будут сменять друг друга. Для этого мы будем использовать CSS анимацию. Мы создадим анимацию для каждого div-а и для каждого span-a, просто она будет срабатывать с разными задержками.

Теперь давайте взглянем на 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;
}

Блоки будут выводится как inline-элементы, что позволит "вставить" их в предложения, не нарушая верстки:

 .rw-words{
 display: inline;
 text-indent: 10px;
}

Каждый span внутри div-a с классом rw-words будет позиционироваться абсолютно, и мы будем скрывать любое его переполнение (overflow: hidden):

 .rw-words span{
 position: absolute;
 opacity: 0;
 overflow: hidden;
 width: 100%;
 color: #6b969d;
}

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

 .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 секунд.

Мы должны установить правильный процент значения непрозрачности. Деление 6 на 18 дает нам 0,333 ..., это будет 33% от нашего  шага keyframe. Все, что мы хотим, чтобы случилось с тегом 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 и также изменяем его высоту.

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

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

Вот и все! Есть множество вариантов создания анимации, несколько таких примеров вы можете увидеть ниже!

Демонстрация

  1. Demo 1: Исчезающие слова
  2. Demo 2: Анимирование высоты и ширины
  3. Demo 3: Падающие слова
  4. Demo 4: Прилетающие слова
  5. Demo 5: Поворот в 3D

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


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

Комментарии  

+4 #1 gege 19.04.2012 11:55
Ооо, благодарю за статью!
как всегда интересно, полезно, увлекательно, красиво и доступно)
Вы молодцы, ребят)

You have no rights to post comments