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

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

Шаг 1. HTML

Для начала мы рассмотрим разметку, чтобы получить данный эффект мы будем использовать достаточно простую разметку, которая будет использована в слайд шоу. Эта структура будет трансформироваться, поэтому можем создать 3D-анимации. Из такой простой разметки:

Нам необходимо сделать такую разметку:

После того как с разметкой мы закончили нам необходимо перейти к стилям.

Шаг 2. CSS

Для начала рассмотрим правила div с классом th-part, которая будет содержать детали для анимации. Каждая из четырех частей будет иметь высоту равную половине высоты оболочки:

Теперь рассмотрим свойства которые будут содержать свойства которые используют текущее слайд-шоу в качестве фонового изображения:

Вторая и третья часть будут содержать div с классом th-inner:

 Идея состоит в том, что мы дублируем изображение, при этом вытаскивая одну копию из второй части:

 Когда мы нажимаем на кнопку для переключения вида, мы добавим класс th-active в оболочку:

Теперь самая главная часть. Первый переход будет для всех частей, но тогда мы переопределим функций синхронизации для некоторых случаев. Ключевым моментом здесь является переход, определённый для класса th-part, он будет применяться после закрытия изображений. Таким образом, когда мы открываем панель с миниатюрами, нам нужно чтобы у 2-й и 3-й части присутствовала функция синхронизации:

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

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