Случайный фон при обновлении страницы за 2 шага

Добрый день. В этой статье я расскажу как сделать случайный фон при каждом обновлении страницы.

На самом деле делается это очень просто. Пишем скрипт на 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

Понравилась статья? Ставь лайк.

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$