Добрый день. В этой статье я расскажу как сделать случайный фон при каждом обновлении страницы.
На самом деле делается это очень просто. Пишем скрипт на jQuery, который будет работать по такому сценарию:
- Определение массива имен классов которым задан разный фон
- Выборка случайного имени класса
- Присвоение выбранного класса тегу body
В настойках моего скрипта можно указать количество созданных классов. Т.е. количество фонов для Вашей страницы
Шаг 1 Создание классов
Добавьте в Ваш файл стилей классы имена которых начинаются на .body_background_ и заканчиваются порядковым номером.
Выглядит это все вот так
.body_background_0 { background:url("img0.png"); } .body_background_1 { background:url("img1.png"); } .body_background_2 { background:url("img2.png"); } .body_background_3 { background:url("img3.png"); }
классом может быть любое количество, важно, что бы это количество совпадало с настройками в скрипте. Кроме самих фонов добавьте еще вот такой класс
.body_background_all { background-position:center center; // удалите строку, что бы включить повторение background-repeat:no-repeat; // удалите строку, что бы включить повторение background-attachment:fixed; // удалите строку, что бы отключить фиксирование при прокрутке -webkit-background-size: cover; // удалите строку, что бы отключить растягивание картинки на всю страницу -moz-background-size: cover; // удалите строку, что бы отключить растягивание картинки на всю страницу -o-background-size: cover; // удалите строку, что бы отключить растягивание картинки на всю страницу background-size: cover; // удалите строку, что бы отключить растягивание картинки на всю страницу }
Этот класс будет добавляться вместе с классом фона. Прочтите комментарии в коде, что бы оптимизировать под свои нужды
Шаг 2 Подключаем внешний скрипт
Подключите внешний скрипт к вашему сайту
или просто вставьте в шаблон главной страницы перед </head>
<script type="text/javascript"> // by Mexalim // mexalim.com.ua (function($) { $( document ).ready(function() { var classnum = 4 // 4 - количество классов с фоном var random = Math.floor(Math.random()*classnum); $("body").addClass("body_background_"+random); // добавляем случайный фон $("body").addClass("body_background_all"); // добавляем общий класс }); })(jQuery) </script>
Если у Вас не подключена библиотека jQuery то добавьте строку
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
перед
<script type="text/javascript"> // by Mexalim
Важно! Не забудьте, что счет идет не с «1», а с «0». В итоге в настройках скрипта 4 = 0 1 2 3, а не 1 2 3 4