Как часто вы замечали так называемые «вееры» с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.

Данный способ неординарного оформления отлично подойдет для портфолио в качестве навигации, или прочей креативной задумки. И так, приступим

Шаг 1. HTML

Для начала мы рассмотрим построение разметки. Разметка будет иметь простую структуру с несколькими элементами div, каждый из которых содержит элемент span для иконки и заголовок h4:

Все достаточно просто, как Вы заметили выше. Последний элемент div не содержит иконку, но имеет вместо нее элементы h4 и h5. Он будет служить «обложкой» нашей книжке с пробниками.

Шаг 2. CSS

Теперь рассмотрим стили. Сначала определим стили для контейнера. Сделаем его такой же ширины, как и отдельная панель (хотя они и будут занимать больше места), чтобы можно было легко центрировать:

Наша цель — построить структуру в виде книжки с несколькими панелями. Каждая панель будет вращаться с помощью трансформаций CSS. Поэтому установим для панели ширину, высоту и зададим абсолютное позиционирование.

В начальном положении все панели «сложены» в стопку. Свойство transform-origin определяет как будут вращаться наши панели. Так как мы будем использовать нижний левый угол, то установим значения 25% 90%. Свойствоbackface-visibility: hidden помогает скрыть скрыть лишний текст при вращении:

Определим разные цвета фона и тени для панелей:

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

Установим изображение маленькой бронзовой клепки. Для нее будем использовать псевдо-класс :after. Он будет иметь градиент и тень, чтобы придать клепке реалистичности. Положение зависит от свойства transform-origin панели, поэтому устанавливаем клепку в левый нижний угол:

 Определим стили для заголовков:

Большой заголовок на обложке будет повернут и размещен в правильное положение. Значения зависят от размера надписи, поэтому при изменении текста нужно будет провести настройку положения.

В завершении установим стили для иконок. В нашем проекте используется специальный шрифт для генерации иконок Fontello . Определим стили для элемента span и псевдо-элемента :before, который содержит символы шрифта для иконок:

Запуск начинается с выполнения функции _init:

Также нужно проверить начальное состояние книжки. Если она должна быть изначально закрыта нужно установить переходы CSS для пунктов (функция_setTransition). В завершении загружаем события для пунктов.

Когда происходит нажатие на пункте, панель вращается до 0 градусов. Также вращаются соседние панели чтобы открылось содержание:

Функция _rotateSiblings имеет вид:

Соседние панели поворачиваются так, чтобы оставлять пространство для обзора содержания. А их положение определяется опциями proximity и neighbor.

Если изначально книжка должна быть закрыта и/или мы определяем пункт, который будет запускать открытие/закрытие, то событие click на указанном пункте будет производиться соответствующие действия в зависимости от текущего статуса.

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

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