939 Рассмотрим слайд-шоу. Слайд-шоу обычно используется для эргономичного расположения изображений, которые мы хотим показать посетителю. Один из видов слайд-шоу – мозаичная смена фоновых изображений с помощью javascript. Такой эффект смотрится весьма интересно. Далее будут рассмотрены несколько видов эффекта. Вы можете использовать любой на свое усмотрение.
Что нужно для создания слайд-шоу?
HTML
Все изображения помещаем в блочные элементы <div> и указываем имя класса panel. Все эти блоки необходимо поместить в другой, больший блок, и указать ему id="boxgallery" и class="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; } |
Фрагмент CSS, отвечающий за оформление мозаики:
|
1 2 3 4 |
.bg-tile { width: 50%; height: 50%; } |
Окно делится на четыре равные части, поэтому высота и ширина каждого изображения устанавливается равной 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%; } |
Первый вариант анимации нашей мозаики с помощью CSS:
|
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; } |
И третий вариант:
|
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' ) ); |
В ней указывается id нашего блока с изображениями, которые мы хотим использовать в слайд-шоу. Id пишется в кавычках (одинарных) и внутри скобок.
Ну вот и все! Мы смогли создать весьма неординарное слайд-шоу, которое можно смело выставлять на суд ваших посетителей и клиентов. В зависимости от дизайна вашего сайта, можно использовать один из предоставленных вариантов реализации.
