Ноябрь 4, 2019 Запись была обновлена
3D преобразования и анимация CSS — Урок 5. Колесо изображений
Видели эти красивы галереи изображений, которыми можно управлять при нажатии на кнопки? А может вы даже пробовали установить их себе на сайт, но у вас ничего не получилось. Тогда этот урок для вас. Сегодня подробно рассмотрим как создаются такие галереи. Я называю такие галереи на CSS «Колесо изображений» 🙂 . После изучения урока вы сможете не только установить ее себе на сайт, но также и изменять некоторые параметры, так как я объясню что и где находится, чтобы вы могли настроить под себя эту галерею. Благодаря этому уроку вы узнаете еще некоторые секреты CSS анимации.
Скрытые возможности и анимация CSS3
Сегодня уже 5-й урок по счету, в котором мы продолжаем изучать возможности CSS3. Предыдущие уроки по этой теме вы можете найти по ссылкам ниже:
- 3D преобразования и анимация CSS — Урок 1. Вращение
- 3D преобразования и анимация CSS — Урок 2. Карусель новостей
- 3D преобразования и анимация CSS — Урок 3. Вращающийся куб
- 3D преобразования и анимация CSS — Урок 4. Управляем мячом
Секреты CSS анимации — Колесо изображений
Смотрим и любуемся следующей анимацией, нажимая кнопки «Предыдущая» и «Следующая»:
Смотрится очень симпатично на мой взгляд.
Также не забываю о тех, у кого браузер не показывает галерею:
"Скелет" галереи
Блоки, которые необходимо поместить в файл HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <section class="container"> <div id="carousel" style="transform: translateZ(-288px) rotateY(-480deg);"> <figure><img src="images/1.jpg" width="186" height="116"></figure> <figure><img src="images/2.jpg" width="186" height="116"></figure> <figure><img src="images/3.jpg" width="186" height="116"></figure> <figure><img src="images/4.jpg" width="186" height="116"></figure> <figure><img src="images/5.jpg" width="186" height="116"></figure> <figure><img src="images/6.jpg" width="186" height="116"></figure> <figure><img src="images/7.jpg" width="186" height="116"></figure> <figure><img src="images/8.jpg" width="186" height="116"></figure> <figure><img src="images/9.jpg" width="186" height="116"></figure> </div> </section> |
Здесь используется новый тег HTML5 - <figure></figure>. Внутри этих тегов находятся изображения, которые мы видим.
Сам CSS
Для начала нам нужен блок, в котором будет располагаться галерея, то есть подобно сцене из прошлых уроков.
У нас это блок с классом container. А вот его стили:
1 2 3 4 5 6 7 8 9 10 11 12 | .container { width: 210px; /* ширина "сцены" */ height: 140px; /* высота "сцены" */ position: relative; /* позиционирование */ margin: 0 auto 40px; /* внешние отступы */ /* "глубина сцены" */ -webkit-perspective: 1100px; -moz-perspective: 1100px; -o-perspective: 1100px; perspective: 1100px; } |
Как видите, префиксы здесь присутствуют, в отличие от прошлых уроков.
Следующим у нас на очереди блок с идентификатором carousel, который находится внутри "сцены":
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #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; } |
С блоками контейнерами разобрались и сейчас переходим непосредственно к изображения, а точнее к тегам, в которых находятся изображения. А находятся они в тегах <figure> </figure>. Общие стили для этого тега:
1 2 3 4 5 6 7 8 9 | #carousel figure { display: block; /* элемент является блоком */ position: absolute; /* абсолютное позиционирование */ width: 186px; /* ширина */ height: 116px; /* высота */ left: 10px; /* расстояние от левого края блока родителя */ top: 10px; /* расстояние от верхнего края блока родителя */ border: 2px solid black; /* граница */ } |
Всё, что осталось в CSS - это для каждого из этих блоков с изображениями задать свой угол поворота. Вы, наверное, скажете что это много чего писать нужно, но ведь эффект того стоит! Итак, следующий код располагает изображения в правильно порядке:
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | /* Первое изображение поворачивать не нужно */ #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 | <script src="js/ut.js"></script> |
А после его вставить:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script> 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 < 2; i++) { navButtons[i].addEventListener( 'click', onNavButtonClick, false); } }; window.addEventListener( 'DOMContentLoaded', init, false); </script> |
Готовую, рабочую версию галереи "Колесо изображений" вы можете скачать по ссылке ниже:
Скачать исходники
Вывод
Этот пример анимации гораздо сложнее тех, которые мы рассматривали в прошлых уроках. Здесь также необходимо было использовать "капельку" Javascript, чтобы анимация заработала. Но эффект стоит того, чтобы потратить время и настроить всё это.
Следующий урок пока что останется для вас секретом 🙂 .
Успехов!
С Уважением, Юрий Немец
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
😎 😎 😎 супер, спасибо!
Юрий — спасибо! такую красоту предлагаете — просто прелесть! Я как то первых уроков не видела — а сразу с 4 начала.
Вопрос — прошу ссылочки на ервые 3 урока!
Спасибо! С ув. Т.С
Татьяна, рад что вам понравилось 🙂 . А ссылки на первые 3 урока находятся в начале статьи.
Юра, это круто. Спасибо от души! Удачи тебе.
Юрий, спасибо огромное за такие щедрые подарки, красиво и профессионально, очень доходчиво все разъяснили.
Здравствуйте, Юрий!!! Спасибо за классную галерею. У меня вопрос: Как изменить размер фотографий, у меня они 640*480, а там всё равно маленькие. Спасибо!!!
Спасибо, Павел 🙂 ! Нужно менять размер блока в котором они находятся. Чтобы его изменить — нужно в файле index.html в строках 36 и 37 менять значения высоты и ширины. Но тогда и отступы внешний вид галереи также придется изменять.
Спасибо!!! А можете подсказать подробнее??? ➡
То что ты делаешь просто супер, спасибо за качественную информацию
Спасибо, Тимофей!