Секрети css анімації - урок 5 - колесо зображень

Бачили ці красиві галереї зображень, якими можна управляти при натисненні на кнопки? А може ви навіть намагалися встановити їх собі на сайт, але у вас нічого не вийшло. Тоді цей урок для вас. Сьогодні детально розглянемо як створюються такі галереї. Я називаю такі галереї на CSS «Колесо зображень» # 128578; . Після вивчення уроку ви зможете не тільки встановити її собі на сайт, але також і змінювати деякі параметри, так як я поясню що і де знаходиться, щоб ви могли налаштувати під себе цю галерею. Завдяки цьому уроку ви дізнаєтеся ще деякі секрети CSS анімації.

Приховані можливості і анімація CSS3

Сьогодні вже 5-й урок по рахунку, в якому ми продовжуємо вивчати можливості CSS3. Попередні уроки по цій темі ви можете знайти за посиланнями нижче:

3D перетворення і анімація CSS - Урок 1. Обертання
3D перетворення і анімація CSS - Урок 2. Карусель новин
3D перетворення і анімація CSS - Урок 3. обертається куб
3D перетворення і анімація CSS - Урок 4. Управляем м`ячем

Секрети CSS анімації - Колесо зображень

Дивимося і милуємося наступної анімацією, натискаючи кнопки «Попередня» і «Наступна»:

Виглядає дуже симпатично на мій погляд.

Також не забуваю про тих, у кого браузер не показує галерею:

"Скелет" галереї

Блоки, які необхідно помістити в файл HTML:

12345678910111213

class="Container"gt;lt;div id="Carousel" style="Transform: translateZ (-288px) rotateY (-480deg) ;"gt;lt;img src="Images / 1.jpg" width="186" height="116"gt; lt;/figuregt;lt;img src="Images / 2.jpg" width="186" height="116"gt; lt;/figuregt;lt;img src="Images / 3.jpg" width="186" height="116"gt; lt;/figuregt;lt;img src="Images / 4.jpg" width="186" height="116"gt; lt;/figuregt;lt;img src="Images / 5.jpg" width="186" height="116"gt; lt;/figuregt;lt;img src="Images / 6.jpg" width="186" height="116"gt; lt;/figuregt;lt;img src="Images / 7.jpg" width="186" height="116"gt; lt;/figuregt;lt;img src="Images / 8.jpg" width="186" height="116"gt; lt;/figuregt;lt;img src="Images / 9.jpg" width="186" height="116"gt; lt;/figuregt;lt;/divgt;lt;/sectiongt;

Тут використовується новий тег HTML5 -. Усередині цих тегів знаходяться зображення, які бачимо.

сам CSS

Для початку нам потрібен блок, в якому буде розташовуватися галерея, тобто подібно сцені з минулих уроків.

У нас це блок з класом container. А ось його стилі:

123456789101112

.container {width: 210px- / * Ширина "сцени" * /height: 140px- / * Висота "сцени" * /position: relative- / * Позиціонування * /margin: 0 auto 40px- / * Зовнішні відступи * // * "Глибина сцени" * /-webkit-perspective: 1100px--moz-perspective: 1100px--o-perspective: 1100px-perspective: 1100px-}

Як бачите, префікси тут присутні, на відміну від минулих уроків.

Наступним у нас на черзі блок із ідентифікатором carousel, який знаходиться всередині "сцени":

1234567891011121314151617181920212223

#carousel {width: 100%- / * Ширина цього блоку на всю ширину блоку зі сценою * /height: 100%- / * Висота цього блоку на всю ширину блоку зі сценою * /position: absolute- / * Абсолютне позиціонування * // * 3D перетворення по осі Z * /-webkit-transform: translateZ( -288px )--moz-transform: translateZ( -288px )--o-transform: translateZ( -288px )-transform: translateZ( -288px )-/ * Відображення в 3D-просторі * /-webkit-transform-style: preserve-3d--moz-transform-style: preserve-3d--o-transform-style: preserve-3d-transform-style: preserve-3d-/ * Тривалість анімації * /-webkit-transition: -webkit-transform 1s--moz-transition: -moz-transform 1s--o-transition: -o-transform 1s-transition: transform 1s-}

З блоками контейнерами розібралися і зараз переходимо безпосередньо до зображення, а точніше до тегам, в яких знаходяться зображення. А знаходяться вони в тегах. Загальні стилі для цього тега:

123456789

#carousel figure {display: block- / * Елемент є блоком * /position: absolute- / * Абсолютне позиціонування * /width: 186px- / * Ширина * /height: 116px- / * Висота * /left: 10px- / * Відстань від лівого краю блоку батька * /top: 10px- / * Відстань від верхнього краю блоку батька * /border: 2px solid black- / * Межа * /}

Все, що залишилося в CSS - це для кожного з цих блоків з зображеннями задати своє кут повороту. Ви, напевно, скажете що це багато чого писати потрібно, але ж ефект того вартий! Отже, наступний код в своєму розпорядженні зображення в правильно порядку:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

/ * Перше зображення повертати не потрібно * /#carousel figure: nth-child(1) {-webkit-transform: rotateY( 0deg ) translateZ( 288px )--moz-transform: rotateY( 0deg ) translateZ( 288px )--o-transform: rotateY( 0deg ) translateZ( 288px )-transform: rotateY( 0deg ) translateZ( 288px )-}/ * Друге зображення повертаємо 40 градусів * /#carousel figure: nth-child(2) {-webkit-transform: rotateY( 40deg ) translateZ( 288px )--moz-transform: rotateY( 40deg ) translateZ( 288px )--o-transform: rotateY( 40deg ) translateZ( 288px )-transform: rotateY( 40deg ) translateZ( 288px )-}/ * Третє зображення повертаємо на 80 градусів * /#carousel figure: nth-child(3) {-webkit-transform: rotateY( 80deg ) translateZ( 288px )--moz-transform: rotateY( 80deg ) translateZ( 288px )--o-transform: rotateY( 80deg ) translateZ( 288px )-transform: rotateY( 80deg ) translateZ( 288px )-}/ * Четверте зображення повертаємо на 120 градусів * /#carousel figure: nth-child(4) {-webkit-transform: rotateY( 120deg ) translateZ( 288px )--moz-transform: rotateY( 120deg ) translateZ( 288px )--o-transform: rotateY( 120deg ) translateZ( 288px )-transform: rotateY( 120deg ) translateZ( 288px )-}/ * П`яте зображення повертаємо на 160 градусів * /#carousel figure: nth-child(5) {-webkit-transform: rotateY( 160deg ) translateZ( 288px )--moz-transform: rotateY( 160deg ) translateZ( 288px )--o-transform: rotateY( 160deg ) translateZ( 288px )-transform: rotateY( 160deg ) translateZ( 288px )-}/ * Шосте зображення повертаємо на 200 градусів * /#carousel figure: nth-child(6) {-webkit-transform: rotateY( 200deg ) translateZ( 288px )--moz-transform: rotateY( 200deg ) translateZ( 288px )--o-transform: rotateY( 200deg ) translateZ( 288px )-transform: rotateY( 200deg ) translateZ( 288px )-}/ * Сьоме зображення повертаємо на 240 градусів * /#carousel figure: nth-child(7) {-webkit-transform: rotateY( 240deg ) translateZ( 288px )--moz-transform: rotateY( 240deg ) translateZ( 288px )--o-transform: rotateY( 240deg ) translateZ( 288px )-transform: rotateY( 240deg ) translateZ( 288px )-}/ * Восьме зображення повертаємо на 280 градусів * /#carousel figure: nth-child(8) {-webkit-transform: rotateY( 280deg ) translateZ( 288px )--moz-transform: rotateY( 280deg ) translateZ( 288px )--o-transform: rotateY( 280deg ) translateZ( 288px )-transform: rotateY( 280deg ) translateZ( 288px )-}/ * Дев`яте зображення повертаємо на 320 градусів * /#carousel figure: nth-child(9) {-webkit-transform: rotateY( 320deg ) translateZ( 288px )--moz-transform: rotateY( 320deg ) translateZ( 288px )--o-transform: rotateY( 320deg ) translateZ( 288px )-transform: rotateY( 320deg ) translateZ( 288px )-}

Я прокоментував CSS код. Думаю так зрозуміліше яке властивість за що відповідає. Також хочу показати наочно що буде якщо поставити різні значення властивості translateZ. Для цього подивіться відео нижче:

Тут головне не лякайтеся!

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

1	lt;script src="Js / ut.js"gt; lt;/scriptgt;

А після його вставити:

1234567891011121314151617181920

lt;scriptgt; var init = function () {var carousel = document.getElementById ( `carousel`), navButtons = document.querySelectorAll ( `# navigation button`), panelCount = carousel.children.length, transformProp = Modernizr.prefixed ( `transform `), theta = 0, onNavButtonclick = function (event) {var increment = parseInt (event.target.getAttribute (` data-increment `)) -theta + = (360 / panelCount) * increment * -1-carousel.style [transformProp] = `translateZ (-288px) rotateY (` + theta + `deg)` -} - for (var i = 0 i lt; 2- i ++) {navButtons[i].addEventListener( `Click`, onNavButtonclick, false)-}}-window.addEventListener( `DOMContentLoaded`, init, false)-lt;/scriptgt;

Готову, робочу версію галереї "Колесо зображень" ви можете завантажити за посиланням нижче:

завантажити вихідні

висновок

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

Наступний урок поки що залишиться для вас секретом # 128578; .