3D преобразования и анимация CSS — Урок 5. Колесо изображений

Секреты 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 &lt,section class=container&gt, &lt,div id=carousel style=transform: translateZ(-288px) rotateY(-480deg),&gt, &lt,figure&gt,&lt,img src=images/1.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=images/2.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=images/3.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=images/4.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=images/5.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=images/6.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=images/7.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=images/8.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=images/9.jpg width=186 height=116&gt,&lt,/figure&gt, &lt,/div&gt, &lt,/section&gt,

Здесь используется новый тег HTML5 – &lt,figure&gt,&lt,/figure&gt,. Внутри этих тегов находятся изображения, которые мы видим.

Сам 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,

С блоками контейнерами разобрались и сейчас переходим непосредственно к изображения, а точнее к тегам, в которых находятся изображения. А находятся они в тегах &lt,figure&gt, &lt,/figure&gt,. Общие стили для этого тега:

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-child1 -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-child2 -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-child3 -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-child4 -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-child5 -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-child6 -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-child7 -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-child8 -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-child9 -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,/script&gt,

А после его вставить:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 &lt,script&gt, 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++ navButtonsi.addEventListener ‘click’, onNavButtonClick, false, , window.addEventListener ‘DOMContentLoaded’, init, false, &lt,/script&gt,

Готовую, рабочую версию галереи ‘Колесо изображений’ вы можете скачать по ссылке ниже:

Скачать исходники

Вывод

Этот пример анимации гораздо сложнее тех, которые мы рассматривали в прошлых уроках. Здесь также необходимо было использовать ‘капельку’ Javascript, чтобы анимация заработала. Но эффект стоит того, чтобы потратить время и настроить всё это.

Следующий урок пока что останется для вас секретом 🙂 .

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: