Та, що біжить рядок на сайт за допомогою css, дизайн і розробка сайту

Та, що біжить рядок на сайт за допомогою css, дизайн і розробка сайту

Доброго вам дня. 🙂

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

Чому було прийнято рішення оновити і переробити наявну рядок. Справа в тому, що раніше, щоб зробити біжучий рядок, використовувався HTML тег, який зараз вважається застарілим і його не радять використовувати, тому як в HTML5 його вже немає.

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





Як бачите, результат такий же як і при використанні старого тега marquee. Робиться біжучий рядок дуже просто. Вам потрібно укласти той елемент, що повинен пересуватися по екрану в блок, якому ми призначимо клас marquee. так само всередині блоку marquee все робимо висновок в тег .

Далі просто прописуєте стилі цього блоку, плюс анімація, яка і буде здійснювати рух рядки.

Тут є кілька головних параметрів, інші вже можете змінювати і додавати свої. Спочатку стилі для батьківського блоку.

  • 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, відкрилися нові можливості і зробити якусь анімацію на сайті стало набагато простіше. Та, що біжить рядок просто застаріла. Але тим не менш, багато хто продовжує її використовувати і як показує практика, часто в тренди повертається то що було колись.

На цьому все, спасибі за увагу. 🙂

Якщо Вам був корисним моя праця, можете підтримати сайт :)

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

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

Схожі статті