Слайд-шоу у вигляді мозаїки

Сьогодні ми будемо мати справу зі слайд-шоу. Слайд-шоу зазвичай використовується для того щоб компактно розмістити зображення, для подальшого показу користувачеві. Ми розглянемо як створити слайд-шоу на своєму сайті, зображення якого будуть змінюватися у вигляді мозаїки на задньому тлі. Це дуже гарний і цікавий ефект, тому я рекомендую відразу подивитися реальний приклад. Також в цьому уроці представлені три види ефектів, тому ви можете вибрати той, який вас найбільше влаштовує.

Демо з 3-ма видами ефектів анімації ви бачите нижче:

дивитися прімерСкачать

Як встановити слайд-шоу собі?

HTML

Для Слай-шоу нам необхідно розмістити зображення в блоках з класом panel, які, в свою чергу, знаходяться в одному великому блоці з ідентифікатором boxgallery і класом boxgallery. Також зверніть увагу на останній атрибут цього блоку data-effect - він дозволяє задавати для різних сторінок, різні ефекти анімації зображень:

lt;div id="Boxgallery" class="Boxgallery" data-effect="Effect-1"gt;lt;div class="Panel"gt; lt;img src="Img / 1.jpg" alt="Image 1"/gt; lt;/divgt;lt;div class="Panel»gt; lt;img src="Img / 2.jpg" alt="Image 2"/gt; lt;/divgt;lt;div class="Panel"gt; lt;img src="Img / 3.jpg" alt="Image 3"/gt; lt;/divgt;lt;div class="Panel"gt; lt;img src="Img / 4.jpg" alt="Image 4"/gt; lt;/divgt;lt;/divgt;

Зображення на сайт ми додали, зараз додамо їм гарний вигляд.

CSS

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

123	html, body, .container {height: 100%-}

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

Відео: Слайд-шоу у вигляді мозаїки

123456789101112

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

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

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

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

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

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

Зараз позиціонуємо ці шматочки мозаїки:

123456789

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

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

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

Маємо в своєму розпорядженні кожне зображення:

Відео: Футажі Зелена Мозаїка з відблисками для слайд шоу

123456789

.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:

12345678910111213

.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)- }}

Для другого ефекту використовується наступний стиль:

123456789101112131415

.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-го:

123456789101112131415161718192021222324252627282930313233

.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):

lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / boxesFx.js"gt; lt;/scriptgt;lt;scriptgt; new BoxesFx (document.getElementById ( `boxgallery`)) -lt;/scriptgt;

Відео: Як зробити новорічне слайдшоу з фотографій?

У цьому рядку:

Відео: Слайд шоу - Мозаїка 225 фото

1	new BoxesFx( document.getElementById( `Boxgallery` ) )-

У дужках і одинарних лапках вказуємо ідентифікатор блоку в якому знаходяться всі наші зображення для слайд-шоу.

висновок

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

Успіхів!

З повагою, Юрій Німець

джерело: https://tympanus.net/codrops/2014/06/11/how-to-create-a-tiled-background-slideshow/

Поділися в соц мережах: