Пожалуй каждый из вас хоть раз, но уже встречал объемные слайдера на сайтах, это весьма правильный подход к организации контента, ведь необходимая информация находится постоянно на виду, да еще оформлена должным образом наверняка привлечет взор обычного читателя. С каждым днем посетителей и веб-мастеров становится тяжело удивить, ведь выходят новые скрипты, которые позволяют существенно расширить возможности при создании сайта. В сегодняшнем уроке мы рассмотрим детально, как создать один из таких объемных ротаторов изображений.

Слайдер достаточно красиво выглядит, но имеет небольшой недостаток, ведь будет работать в браузерах поддерживающие трансформации CSS3. Изображения были предоставлены geishaboy500 и находятся под лицензией  Creative Commons Attribution 2.0 Generic (CC BY 2.0). И так, приступим.

Шаг 1. HTML

Для начала рассмотрим разметку HTML, которая будет содержать в себе блоки с фигурами, при этом каждая фигура будет содержать изображение и подпись к нему.

Данный плагин jQuery преобразует выше приведенную структуру в следующую.

При этом каждая фигура будет с оболочкой в div с классом fs-block, а также добавим навигацию.

Шаг 2. CSS

Для начала мы установим ширину слайдера в процентах для повышения быстродействия, при этом мы определили минимальную и максимальную ширину. Так чтобы все изображения находились пропорционально.

Теперь добавим тень и фоновое изображение.

Для перспективы добавим дополнительную оболочку.

При этом слайдер должен иметь 3d transform-style:

Каждый из центровых блоков будет иметь ширину в 70%, а левое значение 15%, также добавляем переходы к дополнительным блокам.

Далее происходит правильное размещение блоков, Первый будет установлен слева при помощи translateX со значением -100%. Поворачивая его на -35 градусов по оси Y, мы достигнем эффекта отдаленности от центрального блока:

При наведении на крайние блоки они будут немного выдвигаться вперед, для этого будем использовать Modernizr, который не работает на сенсорных девайсах.

Теперь для передней панели установим z-index со значением 100, так как она должна находиться поверх остальных слайдов.

Теперь устанавливаем блок справа:

Затем придаем блоку небольшой поворот.

Теперь сделаем блоки более реалистичными, для этого добавим псевдо-класс :after и добавим рамку шириной 1px (чтобы устранить разрыв между панелями).

Каждый блок имеет различный тип градиента.

Теперь придаем градиент для центральной панели, он придаст ей эффект изогнутости.

Теперь разработаем элементы фигур. Зададим позицию и заполним ими весь блок.

Изображения должны иметь абсолютную позицию.

Теперь стиль для текста.

Навигация будет находиться внизу слайда.

Немного стилизуем стрелки, сделаем их более эластичными.

Шаг 3. JavaScript

В опциях можно задать опции автоматического воспроизведения.

Сделаем предварительную загрузку всех изображений, после этого выполним функции _init:

Мы также должны изменить размер каждого изображения в соответствии с размером её оболочки. Описание элемента отображается только у центральной панели.

Далее мы должны позаботиться об изменении размеров окна. Если пользователь меняет размер окна, мы должны изменить размеры изображений соответственно. Это происходит при вызове функции_layout:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.