4 сентября 2025

Разноцветные стикеры

Интересная реализация объявлений для сайта, в виде разноцветных стикеров. Цвета всех постов меняются рандомно при загрузке страницы. Настройка цветов производится в отдельном файле.

Подобная реализация вывода объявлений, реализована на одном из наших сайтов https://artschool-samara.ru/obrazovanie/objavlenija/ Скачайте и распакуйте архив. Файл colors.php положите в корень вашего сайта.

<?php
header('Content-Type: application/json');
$colors = ['#FFD166', '#FF9A8B', '#8FD3FF', '#A0E7A0', '#D4A5E9', '#FFB7B7', '#CCE1DB', '#EFE9D3', '#B5EAD7', '#C7CEEA', '#F8B195', '#F67280'];
shuffle($colors); // Перемешиваем массив
echo json_encode($colors);
?>

Цвета стикеров настраиваются в файле colors.php.

Подключите скрипт:

<script>
document.addEventListener('DOMContentLoaded', () => {
    fetch('/colors.php')
        .then(response => response.json())
        .then(colors => {
            const stickers = document.querySelectorAll('.sticker-large');
            stickers.forEach((sticker, index) => {
                if (colors[index]) {
                    sticker.style.backgroundColor = colors[index];
                }
            });
        });
});
</script>

Пропишите стили для блока:

.sticker-large {
	width: 338px;
	aspect-ratio: 1 / 1;
	display: inline-block;
	vertical-align: top;
	margin: 10px;
	padding: 20px;
	box-sizing: border-box;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
}

Сами объявления выводятся в виде

<div class="sticker-large">
Рандомный текст
</div>

Скачать архив colors.zip [1021 b] (cкачиваний: 1)