logo

Бегущая строка при помощи анимации на CSS3

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

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

Анимация CSS дает возможность использовать функцию определения времени анимации, которая решает, каким образом та будет развиваться до самого конца. Одна из таких функций определения времени называется steps () и позволяет назначить количество используемых анимацией кадров, она удалит привычную вам гладкую анимацию и создаст анимацию с некоторыми задержками – в точности такую, какая требуется нам для ввода текста.

С помощью функции steps () можно создать анимацию, которой потребуется всего лишь увеличивать к концу абзаца размер элемента с нуля до полного размера.

Начинаем с создания абзаца, который продемонстрирует работу анимированного процесса печати.
С помощью CSS мы добавим нужную анимацию. Далее добавим скрытое переполнение overflow: hidden; для изменения размера абзаца до 0 с тем, чтобы мы не смогли видеть текст. Наконец, можно добавить анимацию ввода текста при помощи функции определения времени steps ().
Анимация увеличит размер абзаца с 0 до 100%, создавая, таким образом, за 50 кадров эффект печати текста.

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

Бегущая строка при помощи анимации на CSS3.


<p>Бегущая строка при помощи анимации на CSS3.</p>

p{
   width: 100%;
   white-space:nowrap;
   line-height: 50px;
   overflow:hidden;
   font-size: 20px;
   color: cornflowerblue;
   -webkit-animation: step 5s steps(50) infinite;
   animation: step 5s steps(50) infinite;
}
/*   Анимация   */
@keyframes step{
   0% { width: 0;}
   100% {width:100%;}
}
@-webkit-keyframes step{
   0% { width: 0;}
   100% {width:100%;}
}

Краткая расшифровка для: p{… animation: step 5s steps(50) infinite; }

  • step — Название анимации (произвольно)
  • 5s — Время анимации
  • steps(50) — Количество «кадров» анимации
  • infinite — Бесконечный повтор (для наглядности)

Получается как бы эффект печатающей машинки. А теперь заставим эту строчку двигаться, для этого достаточно прописать text-align: right; или text-align: center; и строка «побежит» вправо или только до центра соответственно.

Изменения и дополнения в стилях и результат (Если анимация закончила работу — перезагрузите страницу):


p.cen {
   .....
   text-align: right;
   /* К предыдущей записи добавилась цифра 3 - количество повторов анимации*/
   -webkit-animation: cen 5s steps(50) 3;
   animation: cen 5s steps(50) 3;    
}
@keyframes cen{
    from{ width: 0; }
}
@-webkit-keyframes cen{
    from{ width: 0; }
}

Бегущая строка при помощи анимации на CSS3.


p.alternat{
   .....
   text-align: right;
   opacity: 0;
   /* 2s - время задержки начала работы анимации,
      alternate -  анимация работает от начала до конца, и обратно в начало,
      forwards -  после анимации элемент «застывает» в крайнем кадре */
   -webkit-animation :alternat 5s steps(50) 2s 3 alternate forwards; 
   animation :alternat 5s steps(50) 2s 3 alternate forwards;    
} 
@keyframes alternat{
   0% { width: 0;
        opacity: 1}
   100% {width:100%;
         opacity: 1}
}
@-webkit-keyframes alternat {
   0% { width: 0;
        opacity: 1}
   100% {width:100%;
         opacity: 1}
}

Бегущая строка при помощи анимации на CSS3.


p.reverse {
   .....      
   text-align: right;
      /* reverse - анимация работает от конца в начало*/
   -webkit-animation :alternat 5s steps(50) 2s 3 reverse ; 
   animation :alternat 5s steps(50) 2s 3 reverse ;    
}
@keyframes reverse{
    0% { width: 0; }
   100% {width:100%;}
}
@-webkit-keyframes reverse {
    0% { width: 0; }
   100% {width:100%;}
}   

Бегущая строка при помощи анимации на CSS3.

Анимации начинают свою работу сразу при открытии страницы и после окончания цикла (в примерах выше повтор по 3 раза) останавливаются (исключение первый пример, там включено «бесконечное» проигрывание infinite) и начинают работать только после перезагрузки страницы.

Для того, чтобы анимации начинали работать по мере появления на странице в статье Анимация при скролле страницы.


Эффекты для текста 0

Рекомендую прочитать...

Свойство text-shadow
Свойство text-shadow

Свойство text-shadow позволяет видоизменить внешний вид текста . Его применяют для того, чтобы выделить какую-то часть текста (или слово) . Обычное использование для заголовков, ссылок — текста на который следует обратить внимание. Да и просто наличие тени у слова красиво смотрится.

Читать полностью
Псевдоэлементы ::before и ::after
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

Эти псевдоэлементы позволяют вставить на странице ту информацию, которой нет в HTML-коде.

Читать полностью
Анимация SVG — иконок
Анимация SVG-иконок

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

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.