Css красивая бегущая строка: Бегущая строка на чистом CSS – Бегущая строка на сайт с помощью CSS

Leave a Comment / Css / By /

Бегущая строка при помощи анимации на 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) и начинают работать только после перезагрузки страницы.

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

Бегущая строка на CSS3 | Vavik96

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

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

Анимация 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{
    0%{ width: 0; }
}
@-webkit-keyframes cen{
    100% { 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) и начинают работать только после перезагрузки страницы.

Красивая заглавная буква и бегущая строка HTML

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

Забегая вперёд, предупрежу, что сделать красивую заглавную букву, только тегами html — не получится.

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

Поэтому, после отладки, все свойства из атрибута style, лучше перенести в файл style.css, а элементу (красивой заглавной букве), задавать class.

Сначала посмотрим, как выглядит код заглавной буквы, созданной при помощи глобальных стилей. Тут ничего переносить и задавать не нужно.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Красивая заглавная буква</title>
<style>
/* Оформление заглавной буквы */
#yau{
color:#0000FF; /* Цвет буквы */
font-size:30px; /* Размер буквы */
font-family:"Monotype Corsiva"; /* Шрифт буквы */
}
p{
text-indent:30px; /* Красная строка */
}
</style>
</head>
<body>
<!--Первую букву абзаца берём в тег span и задаём ему идентификатор (можно class) yau-->
<p><span>Г</span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом, и из себя самого! Туточки они оба.
А то - небеса-а-а, подземелья.</p>

</body>
</html>

Результат.

Где искать Бога, и откуда ждать дьявола? Да только в себе самом. Туточки они, оба. А то — небеса-а-а-а, подземелья.

И то же самое, но немного по другому — встроенные стили. Такой вариант кода можно применить, для оладки красивой заглавной буквы, в редакторе TinyMCE, установленном на CMS WordPress.

После чего, как я уже говорил, все свойства нужно будет перенести в файл style.css.

<p><span>Г</span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом. Туточки они оба. А то небеса-а-а-а, подземелья.</p>

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

<span style = "font-size: 50px;"><font face="Monotype Corsiva">
<font color="#0000FF">Г</font></font></span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом. Туточки они оба.
А то небеса-а-а-а, подземелья.

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

Дело в том, что декоративных шрифтов, обладающих кроссбраузерностью, в интернете нет.

«Monotype Corsiva» из семейства cursive, который я указал в коде, пожалуй единственный шрифт с заявкой на декоративность, который отобразится в большинстве браузеров.

Чтобы решить эту проблему, и выбрать что-то оригинальное, Вам нужно прочитать статью Шрифты для сайта в CSS.

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

Как сделать красивую заглавную букву, сразу для всех абзацев статьи, можно узнать в статье Как сделать красивую заглавную букву CSS

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

<marquee></marquee> — создаёт бегущую строку.

К сожалению этот тег до сих пор не включён в спецификацию и поэтому выдаёт ошибку при валидации.

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

Посмотрим, как изменяется скорость, направление движения, длина беговой дорожки, и ещё кое-какие параметры.

Направление движения бегущей строки задаётся атрибутом direction. В значении указывается направление движения объекта.

left — движение влево;
right — движение вправо;
ur — движение снизу вверх;
down — движение сверху вниз;

Длина беговой дорожки, при движении по горизонтали, определяется атрибутом width, а при движении по вертикали — атрибутом height, и внедряется в тег атрибутом style.

Бежим слева направо

<marquee direction="right">Бежим слева направо</marquee>

Бежим справа налево

<marquee direction="left">Бежим справа налево</marquee>

Бежим снизу вверх

<marquee direction="up">Бежим снизу вверх</marquee>

Бежим сверху вниз

<marquee  style="height:100px;" direction="down">Бежим сверху вниз</marquee>

Можно окрасить полосу в любой цвет, добавив атрибут bgcolor

<marquee bgcolor="#39c4b3" direction="right">Бежим справа налево</marquee>

Можно сделать, чтобы элемент вышел из-за границы окна и остановился, добавив атрибут behavior со значением slide.

<marquee bgcolor="#39c4b3" direction="right" behavior="slide">Выходим и останавливаемся</marquee>

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

<marquee bgcolor="#39c4b3" direction="right" scrollamount="1">Изменяем скорость движения</marquee>

Дальше, бегущей строке, можно задать различные варианты оформления, добавляя свойства в атрибут style.

И фон, и цвет, и рамку, но так же, как и в случае с красивой заглавной буквой, после отладки, все свойства лучше будет перенести в файл style.css.

Можно вставить в тег, вместо текста, любое изображение, и оно тоже станет «бегущим».

К сожалению, не знаю почему, тег maqruee не включён в спецификацию w3c, и является не валидным.

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

Привожу лишь код различных вариантов бегущей строки.

Желаю творческих успехов!


Перемена

-Сынок, а у вас в садике уже топят?
-Нет, пока только в угол ставят!

— Мам, а как узнать про собачку болеет она или нет?
— По носу!
— Мам, нет у нее поносу.

Кнопка HTML. < < < В раздел > > > Создание директории сайта

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Бегущая строка из картинок (эффект marquee) на CSS3 без JavaScript

При разработке сайтов иногда возникает необходимость в реализации эффекта бегущей строки, наподобие тега marquee, который позволяет перемещать не только текст, но фактически любой контент, заключенный в данный тег. К тому же у тега есть весьма обширный набор атрибутов, позволяющих задать тип движения, направление, скорость, задержку и т.д. Однако подобная реализация имеет ряд недостатков, главным из которых является резкость движения (перемещение элементов происходит рывками) в некоторых браузерах, например, в FireFox. Плюс ко всему тег исключен из спецификации HTML5.

<marquee>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</marquee>

<style type="text/css">
	marquee div {
		width:20px;
		height:20px;
		display:inline-block;
		border:1px solid red;
	}
</style>

Пример бегущей строки marquee в FireFox

И пока нет приемлемой поддержки значений marquee-line и marquee-block свойства overflow-style необходимо искать альтернативы.

Конечно же, существует множество реализаций на JavaScript, в том числе и jQuery-плагинов. Однако порой использование JavaScript является избыточным, поскольку зачастую блок несет в большей степени не информативную, а декоративную составляющую. Поэтому реализация на CSS3 с использованием свойств animation является вполне приемлемой, поскольку поддерживается подавляющим большинством современных браузеров.

Итак, суть метода проста и сводится к следующему. Два одинаковых контейнера абсолютно позиционируются друг за другом. Обоим блокам задается анимация, представляющая собой изменение позиции левой позиции от 0 до -100%. При этом анимация задана как бесконечная. При сдвиге первого блока начинает показываться часть второго блока. Когда первый блок достигает позиции -100% анимация начинается сначала. Начальная позиция блоков обозначена на рисунке, представленном ниже, красным цветом, конечная — зеленым.

Следует упомянуть, что в приведенном примере ширина скроллируемого блока равна 100% ширины окна. Соответственно все фотографии, которые окажутся за пределами указанной ширины скроллируемого блока будут обрезаться.

<section>
    <div>
        <div>
            <span>
                <img src="asserts/image-1.jpg" alt="" border="0">
                <img src="asserts/image-2.jpg" alt="" border="0">
                <img src="asserts/image-3.jpg" alt="" border="0">
                <img src="asserts/image-4.jpg" alt="" border="0">
            </span>
            <span>
                <img src="asserts/image-1.jpg" alt="" border="0">
                <img src="asserts/image-2.jpg" alt="" border="0">
                <img src="asserts/image-3.jpg" alt="" border="0">
                <img src="asserts/image-4.jpg" alt="" border="0">
            </span>
        </div>
    </div>
</section>

Поддержка браузером анимации проверяется с помощью библиотеки Modernizr, которая выставляет у html класс cssanimations или no-cssanimations. Если браузер на поддерживает анимацию, то выводим картинки статикой без каких-либо дополнительных эффектов. Ниже приведен код стилей на SCSS, скомпилированные стили на CSS можно найти по ссылке на гитхабе.

$blockHeight: 420px;

@-webkit-keyframes marquee {
    0% {
		left: 0;
	}
	100% {
		left: -100%;
	}
}

@keyframes marquee {
	0% {
		left: 0;
	}
	100% {
		left: -100%;
	}
}

.b-marquee-line {
	&__flow {
		background: #f0f0f0;
		font-size: 0;
		line-height: 0;
		height: $blockHeight;
		overflow: hidden;
		position: relative;
		width: 100%;
		&-in {
			display: block;
			height: $blockHeight;
			.cssanimations & {
				width: 200%;
				position: absolute;
				overflow: hidden;
				-webkit-animation: marquee 40s linear infinite;
						animation: marquee 40s linear infinite;
			}
		}
		&-block {
			white-space: nowrap;
			.no-cssanimations &:last-child {
				display: none;
			}
			.cssanimations & {
				white-space: nowrap;
				float: left;
				width: 50%;
			}
		}
		&-item {
			height: $blockHeight;
		}
	}
}

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

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

Понравилась статья? — Ставь лайк!

Бегущие строки

Лого SiteHere.ru