Лого SiteHere.ru

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

Секреты CSS анимации - Урок 5 - Колесо изображений

Видели эти красивы галереи изображений, которыми можно управлять при нажатии на кнопки? А может вы даже пробовали установить их себе на сайт, но у вас ничего не получилось. Тогда этот урок для вас. Сегодня подробно рассмотрим как создаются такие галереи. Я называю такие галереи на CSS «Колесо изображений» 🙂 . После изучения урока вы сможете не только установить ее себе на сайт, но также и изменять некоторые параметры, так как я объясню что и где находится, чтобы вы могли настроить под себя эту галерею. Благодаря этому уроку вы узнаете еще некоторые секреты CSS анимации.

Скрытые возможности и анимация CSS3

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

Секреты 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, чтобы анимация заработала. Но эффект стоит того, чтобы потратить время и настроить всё это.

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


Успехов!

С Уважением, Юрий Немец

10 комментариев к записи
  • tt0nik

    😎 😎 😎 супер, спасибо!

     
  • Татьяна

    Юрий — спасибо! такую красоту предлагаете — просто прелесть! Я как то первых уроков не видела — а сразу с 4 начала.
    Вопрос — прошу ссылочки на ервые 3 урока!
    Спасибо! С ув. Т.С

     
    • Юрий

      Татьяна, рад что вам понравилось 🙂 . А ссылки на первые 3 урока находятся в начале статьи.

       
  • Семен

    Юра, это круто. Спасибо от души! Удачи тебе.

     
  • Виктория

    Юрий, спасибо огромное за такие щедрые подарки, красиво и профессионально, очень доходчиво все разъяснили.

     
  • Павел

    Здравствуйте, Юрий!!! Спасибо за классную галерею. У меня вопрос: Как изменить размер фотографий, у меня они 640*480, а там всё равно маленькие. Спасибо!!!

     
    • Юрий

      Спасибо, Павел 🙂 ! Нужно менять размер блока в котором они находятся. Чтобы его изменить — нужно в файле index.html в строках 36 и 37 менять значения высоты и ширины. Но тогда и отступы внешний вид галереи также придется изменять.

       
  • Павел

    Спасибо!!! А можете подсказать подробнее??? ➡

     
  • Тимофей

    То что ты делаешь просто супер, спасибо за качественную информацию

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *