Вы бы хотели иметь свою библиотеку у себя на сайте? Это достаточно просто реализовать, создать динамичную витрину книг, которая будет реагировать на курсор мыши, при этом сопровождается плавной анимацией. Кроме этого была бы возможность прочесть у себя книгу, максимально приближенная дизайном и эффектом переворота страниц. В данном уроке мы рассмотрим как создать замечательную, живую, трехмерную витрину книг с помощью трансформаций стилей и немного магии с помощью jquery.
Такой подход станет отличной находкой для магазина книг, или просто для персонального блога писателя. Проще говоря данный эффект в умелых руках найдет свое применение. И так, давайте рассмотрим как его создать.
Шаг 1. HTML Наша книга состоит из шести основных сторон и один внутренних элементов страницы, которые мы будем использовать для имитации что-то вроде «вид изнутри». Мы могли бы использовать плагин JQuery BookBlock для перелистывания страниц, но мы не хотим перегружать страницу эффектами.
Книга построена следующим образом:
<div class="bk-book">
<div class="bk-front">
<div class="bk-cover">
<h2>
<span>Anthony Burghiss</span>
<span>A Catwork Orange</span>
</h2>
</div>
<div class="bk-cover-back"></div>
</div>
<div class="bk-page">
<div class="bk-content bk-content-current">
<p>Описание</p>
</div>
<div class="bk-content">
<!-- ... -->
</div>
<div class="bk-content">
<!-- ... -->
</div>
</div>
<div class="bk-back">
<p>In this nightmare vision of cats in revolt, fifteen-year-old Alex and his friends set out on a diabolical orgy of robbery, rape, torture and murder. Alex is jailed for his teenage delinquency and the State tries to reform him - but at what cost?</p>
</div>
<div class="bk-right"></div>
<div class="bk-left">
<h2>
<span>Anthony Burghiss</span>
<span>A Catwork Orange</span>
</h2>
</div>
<div class="bk-top"></div>
<div class="bk-bottom"></div>
</div>
Для каждой стороны книги мы зададим определенные параметры, кроме этого мы добавим описание к каждой из сторон. Нам необходимо повернуть книгу, при наведении курсора на 35 градусов по оси ординат.
.bk-list li .bk-book.bk-bookdefault:hover {
transform: rotate3d(0,1,0,35deg);
}
При открытии книги, нажав на кнопку "Читать", будет происходит разворот книги, и мы можем перемещаться по страницам предварительного просмотра, нажав на стрелки.
Вращение и перелистывание страниц книги реализовано путем применения следующих классов:
.bk-list li .bk-viewinside .bk-front {
transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
}
.bk-list li .bk-book.bk-viewinside {
transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
}
.bk-list li .bk-book.bk-viewback {
transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
}
Второй щелчок на книге будет закрывать ее и возвращать обратно на полку.
Вот и все. Готово!
Скачивание файлов доступно только зарегистрированным пользователям