Есть что-то действительно завораживающее в (реальных) книгах. Хотя мы живём во времена, когда книги имеют и цифровую форму, но нет ничего лучше, чем взять реальную книгу и пролистать страницы. Многие макеты в Интернете пытаются передать это чувство путём создания эффектов перелистывания. Сегодня мы бы хотели показать вам небольшую концепцию для книжного интернет-магазина или книжной коллекции используя скрипт BookBlock. Идея состоит в том, чтобы отобразить сетку из книг, где мы сможем посмотреть некую детальную информацию о книге и где мы можем открыть демо книгу в полноэкранном режиме для предварительного просмотра отрывка. Вы вероятно уже видели такого рода опцию "заглянуть внутрь" от Amazon. Для просмотра книги мы используем BookBlock в полноэкранном режиме и для небольших книг мы используем структуру perspective, что позволит нам открыть книгу в формате 3D.

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

Как выглядит книжная сетка:

Когда мы нажимаем на "view details", то мы вращаем книгу в 3D и перемещаем её в левую сторону, что позволит детальному описанию проскользить вправо:

После того как мы нажмём на "look inside", то мы проведём серию анимаций на книги, её обложке и BookBlock. В полноэкранном режиме BookBlock показывает несколько первых страниц для предварительного просмотра:

При нажатии на одну из навигационных стрелок, мы перелистываем текущую страницу в 3D и отображаем  следующие:

Перевод: Art

Оригинал: tympanus.net

Демо тут, исходники тут.

Github