Стрічка новин на сайті через CSS і без JavaScript (біжучий рядок на HTML)

Сьогодні буде корисний пост по темі верстки де ми розкажемо вам як можна реалізувати стрічку новин у вигляді біжучого рядка на HTML + CSS і без JavaScript. Також в якості бонуса в кінці статті поділимось готовим кодом інтеграції одного з найкращих рішень на WordPress сайті.

По суті даний пост буде набором прикладів з сервісу Codepen аналогічно до того, як ми робили в замітках про підкреслювання текстів з властивістю text-decoration та класними прикладами CSS hover ефектів. Але окрім коду ми постараємося прояснити найбільш важливі деталі, які впливають на результат.

Pure CSS Ticker (Horizontal)

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

See the Pen <a href="https://codepen.io/lewismcarey/pen/GJZVoG"> Pure CSS Ticker (Horizontal)</a> by Lewis Carey (<a href="https://codepen.io/lewismcarey">@lewismcarey</a>) on <a href="https://codepen.io">CodePen</a>.

Тут все як має бути – біжучий рядок знизу, що реалізований на напівпрозорому фоні і прив’язаний до низу сторінки. Такий елемент можна використовувати як для стрічки новин, так і для трансляції якоїсь важливої інформації.

Із параметрів, які можна редагувати:

$duration: 30s — швидкість руху тексту (чим більше, тим повільніше рухається);
position: fixed + bottom: 0 – задає прив’язку до низу сторінки;
background-color: rgba(#000, 0.9) – фон блоку + прозорість.

Який основний недолік тут? — біжучий рядок новин не циклічний, тобто в самому кінці він має великий порожній блок без тексту і тільки після його прокрутки знов буде показаний перший елемент.

Pure CSS Ticker Without Space

Як ви бачите в назві, це рішення має прибрати порожнє місце в кінці рядка.

See the Pen <a href="https://codepen.io/bertofern/pen/xxEpQGM"> Pure CSS Ticker Without Space</a> by Alberto Fernández Martínez (<a href="https://codepen.io/bertofern">@bertofern</a>) on <a href="https://codepen.io">CodePen</a>.

Код на 100% відповідає поставленій задачі, але давайте звернемо увагу на HTML. В структурі блоку у вас є 2 SPAN елементи з классами item-collection-1 та item-collection-2. Вони абсолютно ідентичні, причому стилі ми задаємо тільки для першого.

Справа в тому, що другий блок (item-collection-2), судячи по тестам, потрібен для того, щоб в кінці рядка новин не з’являлось ніякого пустого місця. Без цього блогу, скрипт перестане працювати так, як нам потрібно.

Загалом тут більш структурований код, де для параметра animation ви прописуєте окремі дії анімації (swap, marquee) в keyframes. Все інше достатньо просто:

в ticker-wrap задаються параметри для всього блоку: фон, розмір, відступи, прилипання до низу і т.п.;
в item – стиль окремого лементу (новини).

Врахуйте, що для стрічки новин в елементи вам потрібно буде додати гіперлінки / посилання через A тег в HTML.

Pure CSS Ticker (Horizontal) — hover pause

Ну, третій корисний приклад біжучої стрічки з текстом.

See the Pen <a href="https://codepen.io/donnchadh/pen/poyvzog"> Pure CSS Ticker (Horizontal) — hover pause</a> by Donnchadh (<a href="https://codepen.io/donnchadh">@donnchadh</a>) on <a href="https://codepen.io">CodePen</a>.

Логіка роботи та налаштування тут приблизно однакові, вам лиш треба звернути увагу на те, як реалізовані 2 функції:

Заголовок всього блоку на самому початку (Breaking News) та стилі для нього.
Механізм паузи анімації при наведенні на мишки на блок – CSS стилі для ticker:hover.

Використовуючи цю інформацію можна доповнити перші 2 приклади новими можливостями.

Pure CSS News Ticker Horizontal and Vertical

Також можете глянути відео як один розробник створює вертикальну і горизонтальну стрічку новин. Відеоролик англійською, тому для його розуміння треба знати мову.

Код в відео трохи відрізняється від прикладів Codepen, але він + пояснення автора доповнюють один одного. Плюс є рішення з вертикальною анімацією.

Стрічка новин біжучий рядок для WordPress без плагінів

Ну, і наостанок покажемо вам реалізацію даної задачі для WordPress сайтів. Тут використовуються декілька «технік», про які можете детальніше почитати по вказаним лінкам далі. Отже алгоритм наступний:

1. В файлі функцій functions.php створюємо новий WordPress шорткод який потім використаємо в текстовому редакторі в адмінці. Ось його код:

function mynews_block( $atts ) {
 
	$allnews = '';
	$resultnews = '';
 
	$recent = new WP_Query("cat=1&showposts=5"); while($recent->have_posts()) : $recent->the_post(); 
	$allnews .= '<span class="item"><a href="'. get_the_permalink() .'" >'. get_the_title().'</a></span>';
	endwhile; 
 
		$resultnews = '<div class="ticker-wrap"><div class="ticker"><span class="item-collection-1">'.$allnews.'</span><span class="item-collection-2">'.$allnews.'</span></div><div>';	
 
	return $resultnews;
}
add_shortcode('mynews', 'mynews_block');

2. В цьому коді ми реалізували відображення списку постів через WP_Query з параметрами cat=1 (номер категорії для зчитування) та showposts=5 (вибірка останніх 5ти записів).

3. Далі в редакторі Gutenberg ми просто створюємо елемент типу «Короткий код» (Shortcode) та вказуємо назву нашого шорткоду.

Для звичайного редактора це теж буде працювати. Якщо захочете додати відображення стрічки новин в шаблон, то використовуйте функцію виводу шорткоду:

<?php echo do_shortcode( '[mynews]' ); ?>

Це, в принципі все, що вдалося зібрати по цій темі. Якщо не маєте досвіду роботі з цією CMS, то можете використати плагіни для стрічки новин у вигляди біжучого рядка – з готовими рішеннями новачкам буде працювати простіше.