Главная
Web-дизайн
Бегущая строка на сайт с помощью CSS

Бегущая строка на сайт с помощью CSS

Бегущая строка на сайт с помощью CSS

Доброго времени суток. 🙂

Недавно ко мне обратились с просьбой организовать на сайте бегущую строку. Суть задачи была в том, что человек хотел обновить имеющуюся строку, которая была организована с помощью устаревшего HTML тега <marquee>. Было принято решение сделать все с помощью обычного CSS.

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

<marquee>...</marquee>

Браузеры еще поддерживают его, но как долго marquee будет обрабатываться? Вот поэтому, чтобы не рисковать, стоит от него отказаться и если бегущая строка вам все же необходима, то можно сделать ее с помощью CSS. Получится в итоге такое:



Пример

Как видите, результат такой же как и при использовании старого тега marquee. Делается бегущая строка очень просто. Вам нужно заключить тот элемент, что должен передвигаться по экрану в блок, которому мы присвоим класс marquee. так же внутри блока marquee все заключаем в тег <span>.

<div class="marquee"><span>Наш бегущий текст. Текст, который будет двигаться с права налево.</span></div>

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

.marquee{
width:100%;
white-space:nowrap;
overflow:hidden;
}

.marquee span {
color:#212121;
font-size:25px;
display:inline-block;
padding-left:100%;
-webkit-animation: marquee 10s infinite linear;
animation: marquee 10s infinite linear;
}

@-webkit-keyframes marquee {
0%{-webkit-transform: translate(0, 0);}
100%{-webkit-transform: translate(-100%, 0);}
}
@keyframes marquee{
0%{transform: translate(0, 0);}
100%{transform: translate(-100%, 0)}
}

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

  • width:100%; - Задаем ширину нашему родительскому блоку marquee.
  • white-space:nowrap; - запрещаем перенос слов на другую строку.
  • overflow:hidden; - обрезаем все что выходит за наш блок с бегущей строкой, чтобы не было казусов.

Далее стили для span:

  • display:inline-block; - делаем наш span строчно-блочным элементом
  • padding-left:100%; - делаем отступ слева на всю ширину родительского блока.
  • -webkit-animation и animation - применяем анимацию к блоку. Время выполнения анимации 10 секунд. Можете менять значение на свое.
  • @-webkit-keyframes marquee и @keyframes marquee - сама анимация.

Это что касается основных параметров. Как и сказал выше, остальные стили можете добавлять какие угодно.

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

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 4, в среднем: 5 из 5

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко