Плагин книги на jQuery: Зеркальное отражение контента

BookBlock - jQuery плагин книги, который можно использовать для создания компонентов наподобие буклета, с эффектами зеркального отражения, при смене страниц книги (эффект перелистывания). В плагине можно использовать любой контент, например - изображения или текст. Также при необходимости, плагин меняет структуру страницы (т.е. при её зеркальном отражении) и добавляет слой с тенью, чтобы добавить еще больше реализма.

Сложность

Мы будем использовать jQuery ++ Bitovi.

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

<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<!-- основной контент -->
</div>
<div class="bb-item">

</div>
<div class="bb-item">
<!-- ... -->
</div>
<div class="bb-item">
<!-- ... -->
</div>
<!-- ... -->
</div>

Вызов плагина:

$(function() {
             
    $( '#bb-bookblock' ).bookblock();
 
});

Также Вы можете подключить другие необходимые библиотеки (см. демонстрационный пример).

Настройка плагина книги

Для плагина доступны следующие параметры:

// скорость зеркального перехода в мс.
speed       : 1000,
 
// упрощение перехода.
easing      : 'ease-in-out',
 
// если значение true, то у страницы будет наложение, для моделирования теней
shadows     : true,
 
// значение непрозрачности тени с обеих сторон.
// значения : 0.1 - 1
shadowSides : 0.2,
 
// значение непрозрачности тени на зеркальной странице.
// значение : 0.1 - 1
shadowFlip  : 0.1,
 
// значение perspective
perspective : 1300,
 
// если нужно показать первый элемент после завершения всей книги.
circular    : false,
 
// если нужно определить селектор с функцией next(). example: '#bb-nav-next'.
nextEl      : '',
 
// если нужно определить селектор с функцией prev().
prevEl      : '',
 
// обратный вызов после зеркального отображения.
// индекс текущего элемента страницы.
// isLimit – если значение true, значит текущая страница - последняя (или первая)
.onEndFlip   : function( page, isLimit ) { return false; },
 
// обратный вызов перед переходом
// индекс текущего элемента страницы
onBeforeFlip: function( page ) { return false; }

Советую посмотреть на эти демонстрационные примеры с различными конфигурациями:

Перевод статьи BookBlock: A Content Flip Plugin

Тэги: plugin

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.