2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
Смена фона при перезагрузке страницы (на условных операторах) для uCoz

Смена фона при перезагрузке страницы (на условных операторах) для uCoz

Скрипты для uCoz 2017-Мар-17 proucoz 629 4

Сегодня нашел пост, где рассказывалось, как осуществить автоматическую смену фона при перезагрузке страницы. Реализация была на 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, поэтому это не является недостатком.

На этом все, ждите новых интересных решений smile

Источник: https://proucoz.site/
4 комментария
avatar
1
1
Но почему же +1?   

Если возникает у кого либо подобный вопрос, то отвечу.   
Функция random начинает свой отчет от 0 и соответственно до 9, то есть включает 10 элементов.

Если +1 не указывать, то надо будет начинать нумерацию классов не с fon1, а с fon0
avatar
0
2
Да, все именно так)))
avatar
0
3
В принципе такое можно проделывать не только с фоном. Можно делать даже меняющиеся рекламные банеры с этим оператором))) wink
avatar
0
4
Вариантов много smile Есть идеи - предлагай)
avatar