Сегодня нашел пост, где рассказывалось, как осуществить автоматическую смену фона при перезагрузке страницы. Реализация была на JavaScript, однако того же эффекта можно достичь использую стандартные условные операторы системы uCoz и несколько строк кода в CSS.
Работа максимально проста: оператор выдает рандомное число из заданного диапазона, в результате мы получаем классы с разными заведомо известными именами и присваиваем к ним нужный фон (картинку, цвет, градиент).
Установка
К любому нужному элементу на странице пропишите следующий код:
Код
class="fon<?(rnd(10)+1)?>"
Где 10 — максимальное число вариантов фона. В результате получатся классы с именем fon1, fon2, fon5, fon8 и т.д.
Например, если вы хотите установить автоматическую смена фона на body, используйте такую запись:
Код
<body class="fon<?(rnd(10)+1)?>">
Чтобы не проходить по всем шаблонам, можно использовать автозамену. Если у элемента уже есть класс, через пробел допишите только эту часть fon<?(rnd(10)+1)?>
. В результате получится нечто такое:
Код
<div class="wrapper fon<?(rnd(10)+1)?>">содержимое блока</div>
Дальше останется в Таблицу стилей CSS записать вариации фона:
Код
.fon1 {background:#F44336;} .fon2 {background:#E91E63;} .fon3 {background:#9C27B0;} .fon4 {background:#673AB7;} .fon5 {background:#3F51B5;} .fon6 {background:#2196F3;} .fon7 {background:#03A9F4;} .fon8 {background:#00BCD4;} .fon9 {background:#009688;} .fon10 {background:#4CAF50;}
Я использовал цвет, но вы можете установить на фон любое изображение или даже градиент. Также здесь можно использовать различную анимацию и любые другие свойства CSS. Можно, к примеру, сделать часть фонов цветом, часть картинкой.
Однако стоит понимать, что число выдается рандомно, поэтому вполне возможно, что при нескольких обновлениях страницах останется тот же фон, так как система выдаст одно и тоже число. Именно так работает рандомизатор везде, в том числе и на реализации на JavaScript, поэтому это не является недостатком.
На этом все, ждите новых интересных решений