Exore LTD » jQuery » Слайд-шоу в виде мозаики
Лого SiteHere.ru

Октябрь 25, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Слайд-шоу в виде мозаики

Слайд-шоу в виде мозаики

Сегодня мы будем иметь дело со слайд-шоу. Слайд-шоу обычно используется для того чтобы компактно расположить изображения, для дальнейшего показа пользователю. Мы рассмотрим как создать слайд-шоу на своём сайте, изображения которого будут меняться в виде мозаики на заднем фоне. Это очень красивый и интересный эффект, поэтому я рекомендую сразу посмотреть реальный пример. Также в этом уроке представлены три вида эффектов, поэтому вы можете выбрать тот, который вас больше всего устраивает.

Слайд-шоу в виде мозаики



Демо с 3-мя видами эффектов анимации вы можете увидеть ниже:

Смотреть примерСкачать

Как установить слайд-шоу себе?

HTML

Для слай-шоу нам необходимо разместить изображения в блоках <div> с классом panel, которые, в свою очередь, находятся в одном большом блоке с идентификатором boxgallery и классом boxgallery. Также обратите внимание на последний атрибут этого блока data-effect — он позволяет задавать для разных страниц, разные эффекты анимации изображений:

1
2
3
4
5
6

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
    <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
    <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
    <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
    <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

Изображения на сайт мы добавили, сейчас придадим им красивый вид.



CSS

Наша слайд-шоу будет показываться в полноэкранном режиме, поэтому сперва необходимо подготовить для этого страницу:

1
2
3

html, body, .container {
    height: 100%;
}

Основной блок, в котором находятся изображения, а также его потомки(вложенные в него блоки) будут иметь абсолютное позиционирование и занимать всю ширину и высоту окна браузера:

1
2
3
4
5
6
7
8
9
10
11
12

.js .boxgallery,
.js .boxgallery div {
    position: absolute;
}
 
.js .boxgallery,
.js .panel {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

В процессе анимации, когда наши изображения будут сменять друг друга, мы должны быть уверены что ничего не будет перекрывать:

1
2
3
4
5

.js .boxgallery,
.bg-tile,
.bg-img {
    overflow: hidden;
}

Далее необходимо задать стили для мозаики изображений:

1
2
3
4

.bg-tile {
    width: 50%;
    height: 50%;
}

Так как у нас всего 4 кусочка мозаики изображения, то, соответственно, каждый из этих кусочков будет иметь высоту и ширину в 50%.

Сейчас позиционируем эти кусочки мозаики:

1
2
3
4
5
6
7
8
9

.bg-tile:nth-child(2),
.bg-tile:nth-child(4) {
    left: 50%;
}
 
.bg-tile:nth-child(3),
.bg-tile:nth-child(4) {
    top: 50%;
}

При разделении изображений каждый кусочек занимает всю ширину и высоту определенной части мозаики:

1
2
3
4
5

.bg-img {
    width: 100%;
    height: 100%;
    background: #999;
}

Располагаем каждое изображение:

1
2
3
4
5
6
7
8
9

.bg-tile:nth-child(2) .bg-img img,
.bg-tile:nth-child(4) .bg-img img {
    left: -100%;
}
 
.bg-tile:nth-child(3) .bg-img img,
.bg-tile:nth-child(4) .bg-img img {
    top: -100%;
}

А для эффекта, который демонстрируется в 1-м демо используется следующая анимация CSS3:

1
2
3
4
5
6
7
8
9
10
11
12
13

.panel.current .bg-img {
    transition: transform 1.1s ease-in-out;
}
 
.boxgallery[data-effect="effect-1"] .panel.active .bg-tile,
.boxgallery[data-effect="effect-2"] .panel.active .bg-tile {
    animation: scaleDown 1.1s ease-in-out;
}
 
@keyframes scaleDown {
    from { transform: translate3d(0,0,380px); }
    to { transform: translate3d(0,0,0); }
}

Для второго эффекта используется следующий стиль:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.boxgallery[data-effect="effect-2"] .panel.current .bg-img {
    transition: transform 0.9s cubic-bezier(0.7,0,0.3,1);
}
 
.boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(2) .bg-img {
    transition-delay: 0.15s;
}
 
.boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(3) .bg-img {
    transition-delay: 0.3s;
}
 
.boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(4) .bg-img {
    transition-delay: 0.45s;
}

И, наконец, для 3-го:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.boxgallery[data-effect="effect-3"] .panel::after {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    content: '';
    transition: opacity 1.1s ease-in-out;
}
 
.boxgallery[data-effect="effect-3"] .panel.current::after,
.boxgallery[data-effect="effect-3"] .panel.active::after {
    opacity: 0;
}
 
.boxgallery[data-effect="effect-3"] .panel.current::after {
    transition: none;
}
 
.boxgallery[data-effect="effect-3"] .panel.current .bg-img {
    transition: transform 1.1s cubic-bezier(0.7,0,0.3,1);
}
 
.boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(2) .bg-img {
    transition-delay: 0.15s;
}
 
.boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(3) .bg-img {
    transition-delay: 0.3s;
}
 
.boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(4) .bg-img {
    transition-delay: 0.45s;
}


Javascript

Осталось совсем немного. Необходимо подключить нужные библиотеки Javascript в конце документа(classie.js,boxesFx.js):

1
2
3
4
5

<script src="js/classie.js"></script>
<script src="js/boxesFx.js"></script>
<script>
    new BoxesFx( document.getElementById( 'boxgallery' ) );
</script>

В этой строке:

1

new BoxesFx( document.getElementById( 'boxgallery' ) );

В скобках и одинарных кавычках указываем идентификатор блока в котором находятся все наши изображения для слайд-шоу.



Вывод

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


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2014/06/11/how-to-create-a-tiled-background-slideshow/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

4 комментария к записи
  • Саматакая

    На IE — не работает, очень жаль

     
    Ответить
    • Артем

      по-моему, в IE уже давно никто не работает 😈

       
      Ответить
  • Аретм

    Помогите мне нужно, добавить больше фото для слайдов но не показывает,

    <div id="boxgallery" class="boxgallery" data-effect="effect-1">
    <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
    <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
    <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
    <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div> 
    <div class="panel"><img src="img/5.jpg" alt="Image 5"/></div>
     
    Ответить
    • Юрий

      Артем, здравствуйте!

      В примере HTML структуры, которую привели Вы, не хватает закрывающего блока </div>.

       
      Ответить

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

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