Главная
Web-дизайн
Слайдер фонового изображения или меняющийся фон сайта с помощью CSS

Слайдер фонового изображения или меняющийся фон сайта с помощью CSS

Слайдер фонового изображения

Доброго времени суток. 🙂

Хочу показать Вам как с помощью CSS можно организовать - слайдер фона сайта. То есть фон сайта будет меняться и станет динамичным. Такой эффект часто применяют на сайтах визитках, для демонстраций портфолио или других изображений, которые расскажут о тематике и направлении сайта.

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



Пример




Скачать


HTML разметка

Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body.

<ul class="body_slides">
<li></li>
<li></li>
<li></li>
</ul>

В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше.

CSS стили

Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл стиле вашего сайта и добавляем в него следующий код.

.body_slides{
	list-style:none;
	margin:0;
	padding:0;
	z-index:-2; 
	background:#000;}
.body_slides,
.body_slides:after{
    position: fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;}
.body_slides:after { 
    content: '';
	background: transparent url(images/pattern.png) repeat top left;}


.body_slides li{
    width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
    background-size:cover;
    background-repeat:none;
	opacity:0;
    -webkit-animation: anim_slides 18s linear infinite 0s;
    -moz-animation: anim_slides 18s linear infinite 0s;
    -o-animation: anim_slides 18s linear infinite 0s;
    -ms-animation: anim_slides 18s linear infinite 0s;
    animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1){
background-image: url(images/1.jpg) 
}
.body_slides li:nth-child(2){
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(images/2.jpg) 
}
.body_slides li:nth-child(3){
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(images/3.jpg) 
}
@-webkit-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}

Если Вы разбираетесь в CSS, то для Вас не составит труда понять, что за что отвечает. Расскажу по минимуму, потому как обучать CSS, нет смысла.

Наш список со слайдами имеет класс body_slides. Ему заданы стили, для внешнего вида и общих настроек.

Далее у нас идет псевдоэлемент - :after, который задает дополнительный слой и поверх фона наложен узор в виде точек. Делается это с помощью изображение, к которому указан путь images/pattern.png. Если у Вас другой путь, то укажите его правильно.

.body_slides li:nth-child(1) - это первый по порядку слайд и ему задан фоновый рисунок. Далее идет nth-child(2), ему кроме рисунка задано еще время и равно 6 сек. То есть, он появится через 6 секунд после первого слайда. Далее nth-child(3), он появится еще через шесть секунд, поэтому у него время 12 сек. Если нужно добавить 4 слайд, то добавляем nth-child(4) и у него должно быть время уже 18 секунд. Думаю тут понятно.

Далее нужно указать полное время анимации, оно сейчас задано в body_slides li и равно 18 сек. Если добавите 4 слайд то будет равно 24 и так далее. Если с математикой дружите, должны справится, главное не ошибиться ибо слайдер ровно не заработает. По желанию можно ускорить или замедлить, прописав нужное время.

keyframes anim_slides - это появление и исчезновении слайда. Изначально слайд прозрачный и ему задано условие - opacity:0;. Когда приходит очередь любого из слайдов, он сначала появляется, а потом начинает вновь становится прозрачным и полностью исчезает, а на его месте появляется новый. Если хотите изменить скорость появления или исчезновения, меняйте проценты - это процент от общего времени.

Остальные настройки уже по желанию и нужде - общий фон, сейчас черный, путь к картинкам, позиционирование, уровень слоя и тд. Преимущество данного слайдера в том, что он простенький и не использует скриптов и целых библиотек, если бы он был сделан с помощью - jQuery. Очень надеюсь, что если Вы хотели себе смену фоновых картинок то данный CSS слайдер, Вам поможет.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(16 голосов, в среднем: 5 из 5)

Опубликовано 15 комментариев

  • Сергей
    Комментариев: 1

    Спасибо! Это действительно очень просто и круто! То что нужно.

  • Антон
    Комментариев: 1

    А можно сделать так, что бы фотографии показывались рандомно? То есть, чтобы при переходе на другую страницу сайта (или обновлении текущей) фон показывался не с первого фото.

  • dfgdfg
    Комментариев: 1

    Прикольно, но в IE не работает. Во всяком случае в 11.

  • Дмитрий
    Комментариев: 1

    Спасибо! Крутой слайдер! А как сделать, чтобы каждый бэкграунд кликабелен был и каждый со своей ссылкой?

  • ФФ
    Комментариев: 1

    Обьясните для чайника пожалуйста, как именно замедлить слайдер? (нужно что бы каждый слайд длился минуту)

    • Виталий
      Комментариев: 269

      Смотрите, сейчас время всей анимации 18 секунд. С 28-32 строки кода стилей видно значение 18s.
      У нас три слайда, первый показывается 6 сек с 0до 6. Второй тоже 6 сек с 6 до 12 секунды и третий тоже 6 сек с 12 до 18 секунды. Значит Вам нужно заменить значения на большие, то есть если у Вас 3 слайда по минуте это - 180 секунд, то бишь в минуте 60 сек умножаем на три слайда, вот и получилось 180 секунд.
      Первому слайду время указывать ненужно, он и так будет показан теперь 60 сек.
      Второму слайду в коде заменим 6 сек на 60
      38-39 строки там значения 6.0s; меняем на 60.0s; и так далее для третьего слайда
      43-44 строки 12.0s; меняем на 120.0s;
      Вот и все. теперь у Вас каждый слайд по 60 сек будет висеть, то бишь по одной минуте. Я бы не советовал так долго, вероятность того что человек увидит все крайне мала, хотя если у Вас много текста на странице который нужно читать, тогда да слайдшоу будет видно 🙂

  • Лилия
    Комментариев: 1

    Виталик, ты меня просто спас этой статьей! Спасибо! Так не хотелось в готовую тему подключать слик-слайдер. Все очень доходчиво, просто и понятно!

  • Ната
    Комментариев: 2

    Здравствуйте, Виталий! Слайдер супер!!!!!!!! Совсем не нагружает сайт. Спасибо Вам за такой код!. Только вот хочется чуть-чуть изменить.
    Подскажите, пожалуйста, как сделать так ,чтобы слайды шли не через черный фон,а постепенно меняясь. Во втором слайде я поставила время 7 s. Получается, что 2 и 3 слайд меняются постепенно. А потом переход с 3-го слайда на первый снова черный фон и так же черный фон при переходе с 1-го на 2-й слайд. Заранее спасибо за ответ!

    • Виталий
      Комментариев: 269

      Если вы поменяли время второго слайда, то нужно менять и общее время. Выше я отвечал на схожий комментарий и объяснял как работает сам слайдер. Черный цвет задан в 6 строке стилей background:#000;

      • Ната
        Комментариев: 2

        Виталий, спасибо за ответ! Я просто убрала время 0s и сделала черный фон прозрачным и получилось вот так:
        .body_slides li{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        background-size:cover;
        background-repeat:none;
        opacity:0;
        -webkit-animation: anim_slides 24s linear infinite;
        -moz-animation: anim_slides 24s linear infinite;
        -o-animation: anim_slides 24s linear infinite
        -ms-animation: anim_slides 24s linear infinite;
        animation: anim_slides 24s linear infinite;

  • Николай
    Комментариев: 1

    Виталий здравствуйте, подскажите пожалуйста как можно применить ваш слайдер для картинки, а не бэкграунда. За ранее спасибо.

    • Виталий
      Комментариев: 269

      Поменяйте стили. Сейчас блок фиксированный и растянут на весь экран. Задайте ему нужный размер и поместите туда куда нужно и он будет листать картинки.

  • Павел
    Комментариев: 2

    Добрый день!
    Применил Ваш слайдер на свой сайт. В целом всё хорошо, проблему вижу только в том, что на разных экранах картинки показываются по разному: на каких-то экранах удачно, на других нет.
    Решение видится в том, чтобы разработчик сайта подготавливал в данном случае не 3 картинки, а несколько групп из 3-х картинок, каждая из которых больше подходит к тому или иному устройству.
    Было бы здорово, если бы Вы дополнили слайдер js-кодом, который определял бы размер экрана и далее определял какую группу картинок использовать.

  • Павел
    Комментариев: 1

    добрый день. не могу разобраться как вместо статичного фона на входном экране вставить этот слайдер фонов на этом сайте http://dufor-potolok.ru/
    Может кто-нибудь помочь? У меня вместо слайдера черный фон и еще другие фоны тооже становятся черными некоторые

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий