Добрый день. В этой статье я расскажу как сделать случайный фон при каждом обновлении страницы.
На самом деле делается это очень просто. Пишем скрипт на 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
