Автор

Полноэкранный эффект переворота страниц

Полноэкранный эффект переворота страниц


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

Мы будем также использовать JScrollPane. К большому счастью Kevin Luck, автор, добавил полосу прокрутки для содержания в случае необходимости.

Пожалуйста, обратите внимание: CSS 3D преобразования будет работать только в современных браузерах, которые поддерживают эти свойства.

Мы будем использовать такие библиотеки JQuery и плагины:

  1. BookBlock -  Pedro Botelho
  2. Пользовательские JQuery + + от Bitovi
  3. JScrollPane - Kevin Luck
  4. JQuery плагин Wheel Mouse от Brandon Aaron
  5. Пользовательские Modernizr (заглянуть внутрь, чтобы увидеть, что эта сборка включает в себя)

Итак, давайте начнем!

Шаг 1. HTML

Давайте добавим основной контейнер для всех наших элементов. Внутри, мы добавим подразделение для бокового меню который мы присвоим класс “menu-panel”, а для оболочки BookBlock с классом “bb-custom-wrapper”. BookBlock будет содержать обертку (которые мы будем применять плагин) и структуру, что нужно для плагина. Внутри каждого элемента, мы добавим содержание оболочки с разделением, что нам нужно для функциональности пользовательской.

<div id="container" class="container">
<div class="menu-panel">
 <h3>НАВИГАЦИЯ</h3>
 <ul id="menu-toc" class="menu-toc">
 <li class="menu-toc-current"><a href="#item1">Великий канцеляр</a></li>
 <li><a href="#item2">Рукописи не горят</a></li>
 <li><a href="#item3">Роман о дьяволе</a></li>
 <li><a href="#item4">Морфий</a></li>
 <li><a href="#item5">Мастер и Маргарита </a></li>
 </ul>
 </div>
 <div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
 <div class="bb-item" id="item1">
 <div class="content">
 <div class="scroller">
 <h2>Описание</h2>
 <p>...</p>
 </div>
 </div><!-- /content -->
 </div><!-- /bb-item -->
 <div class="bb-item" id="item2"><!-- ... --></div>
 <div class="bb-item" id="item3"><!-- ... --></div>
 <div class="bb-item" id="item4"><!-- ... --></div>
 <div class="bb-item" id="item5"><!-- ... --></div>
 </div><!-- /bb-bookblock -->
 <nav>
 <a id="bb-nav-prev" href="#"><</a>
 <a id="bb-nav-next" href="#">></a>
 </nav>
 </div><!-- /bb-custom-wrapper -->
</div><!-- /container -->

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

Шаг 2. CSS

Давайте начнем с импорта шрифта Lato с шрифтов Google Web.

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

Структура должен иметь высоту 100%, так как мы должны установить высоту абсолютных элементов внутри высоты окна.

html {
 height: 100%;
}

Мы буем использовать border-box для изменения размеров окна, которое позволит нам определить процент для ширины и высоты элементов.

*,
*:after,
*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}

Давайте определим шрифт для контейнера и установив его высоту до 100%.

body {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 font-weight: 400;
 font-size: 100%;
 color: #333;
 height: 100%;
}

Мы используем Modernizr и мы должны добавить класс "no-js" для HTML элемента.Это позволит нам дать определенные свойствам CSS для элементов, которые мы не хотим использовать, если JavaScript выключен.

.js body {
 overflow: hidden;
}

Давайте определим некоторые стили для ссылок.

a {
 color: #555;
 text-decoration: none;
}

a:hover {
 color: #000;
}

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

.container,
.bb-custom-wrapper,
.bb-bookblock {
 width: 100%;
 height: 100%;
}

.container {
 position: relative;
 left: 0px;
 transition: left 0.3s ease-in-out;
}

Когда мы нажимаем на кнопку меню, мы добавим еще один класс в контейнер, который будет установлен слева 240 пикселей (ширина бокового меню).

.slideRight {
 left: 240px;
}

По умолчанию, мы хотим, чтобы боковая панель меню, была прикреплена к левой стороне.

.menu-panel {
 background: #f1103a;
 width: 240px;
 height: 100%;
 position: fixed;
 z-index: 1000;
 top: 0;
 left: 0;
 text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

Когда JS включен, мы установим абсолютную позицию слева в -240 пикселей:

.js .menu-panel {
 position: absolute;
 left: -240px;
}

Определяем стили для основного меню.

.menu-panel h3 {
 font-size: 1.8em;
 padding: 20px;
 font-weight: 300;
 color: #fff;
 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}

.menu-toc {
 list-style: none;
}

.menu-toc li a {
 display: block;
 color: #fff;
 font-size: 1.1em;
 line-height: 3.5;
 padding: 0 20px;
 cursor: pointer;
 background: #f1103a;
 border-bottom: 1px solid #dd1338;
}

.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
 background: #dd1338;
}

Навигация будет иметь абсолютное позиционирование.

.bb-custom-wrapper nav {
 top: 20px;
 left: 60px;
 position: absolute;
 z-index: 1000;
}

Стрелка ссылки и кнопки меню также будут иметь абсолютное позиционирование, и мы сделаем их круглыми, установив радиус 50%.

.bb-custom-wrapper nav span,
.menu-button {
 position: absolute;
 width: 32px;
 height: 32px;
 top: 0;
 left: 0;
 background: #f1103a;
 border-radius: 50%;
 color: #fff;
 line-height: 30px;
 text-align: center;
 speak: none;
 font-weight: bold;
 cursor: pointer;
}

.bb-custom-wrapper nav span:last-child {
 left: 40px;
}

.bb-custom-wrapper nav span:hover,
.menu-button:hover {
 background: #000;
}

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

.menu-button {
 z-index: 1000;
 left: 20px;
 top: 20px;
 text-indent: -9000px;
}

Давайте создадим маленькую иконку меню с помощью псевдо-элемента и двойной тени для верхней и нижней строки.

.menu-button:after {
 position: absolute;
 content: '';
 width: 50%;
 height: 2px;
 background: #fff;
 top: 50%;
 margin-top: -1px;
 left: 25%;
 box-shadow: 0 -4px #fff, 0 4px #fff;
}

В случае, если JS не включен, мы не нуждаемся в этих элементов, так что мы просто их скрываем.

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
 display: none;
}

Добавим полосу прокрутки, которая будет увеличиваться вместе с содержанием.

.scroller {
 padding: 10px 5% 10px 5%;
}

Давайте скруглим острые углы для прокрутки, добавляя псевдо-элементы с белым прозрачным градиентом к верхней и нижней части содержания DIV.

.js .content:before,
.js .content:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 20px;
 z-index: 100;
 pointer-events: none;
 background:
 linear-gradient(
 to bottom,
 rgba(255,255,255,1) 0%,
 rgba(255,255,255,0) 100%
 );
}

.js .content:after {
 top: auto;
 bottom: 0;
 background:
 linear-gradient(
 to top,
 rgba(255,255,255,1) 0%,
 rgba(255,255,255,0) 100%
 );
}

Давайте добавим стиль текста для элементов.

.content h2 {
 font-weight: 300;
 font-size: 4em;
 padding: 0 0 10px;
 color: #333;
 margin: 0 1% 40px;
 text-align: left;
 box-shadow: 0 10px 0 rgba(0,0,0,0.02);
 text-shadow: 0 0 2px #fff;
}

.no-js .content h2 {
 padding: 40px 1% 20px;
}

.content p {
 font-size: 1.2em;
 line-height: 1.6;
 font-weight: 300;
 padding: 5px 8%;
 text-align: justify;
}

Далее сделаем медиа-запросы для изменения шрифта для адаптации к различным разрешениям.

@media screen and (max-width: 800px){
 .no-js .menu-panel {
 display: none;
 }

 .no-js .container {
 padding: 0;
 }
}

@media screen and (max-width: 400px){
 .menu-panel,
 .content {
 font-size: 75%;
 }
}

 

Со стилями мы закончили. Переходим к следующему шагу.

 

Шаг 3. JavaScript

 

Мы начнем c кэширования некоторых элементов и инициализации плагина BookBlock. Также активируем работу плагина  JScrollPane. Это указано в onEndFlip обратного вызова которые передаются в BookBlock.

var $container = $( '#container' ),

 // Элемент мы будем применять для плагина BookBlock
 $bookBlock = $( '#bb-bookblock' ),

 // BookBlock пункты (bb-item)
 $items = $bookBlock.children(),

 // Индекс текущего элемента
 current = 0,

 // Инициализируем BookBlock
 bb = $( '#bb-bookblock' ).bookblock( {
 speed : 800,
 perspective : 2000,
 shadowSides : 0.8,
 shadowFlip : 0.4,
 // После каждого переворота.....
 onEndFlip : function(old, page, isLimit) {

 //Изменение текущего значения..
 current = page;

 // Обновить выбранный пункт оглавления (TOC)
 updateTOC();

 // Показывать и / или скрыть стрелками
 updateNavigation( isLimit );

 // Инициализируем jScrollPane
 setJSP( 'init' );

 setJSP( 'destroy', old );

 }
 } ),
 // Стрелками
 $navNext = $( '#bb-nav-next' ),
 $navPrev = $( '#bb-nav-prev' ).hide(),

 // Таблица элементов контента
 $menuItems = $container.find( 'ul.menu-toc > li' ),

 // Таблица элементов контента
 $tblcontents = $( '#tblcontents' ),

 transEndEventNames = {
 'WebkitTransition': 'webkitTransitionEnd',
 'MozTransition': 'transitionend',
 'OTransition': 'oTransitionEnd',
 'msTransition': 'MSTransitionEnd',
 'transition': 'transitionend'
 },

 // Переход к названию события
 transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],

 // Проверяем, если переходы поддерживается
 supportTransitions = Modernizr.csstransitions;

Мы должны инициализировать JScrollPane для первого (текущего) элемента.

function init() {

 // Инициализация jScrollPane
 setJSP( 'init' );
 initEvents();

}

Нам нужно будет связать несколько событий:

  1. Мы будем называть следующее BookBlock () и предыдущий () методы, когда мы нажимаем стрелки навигации или при открытии страницы
  2. Оглавление будет показано / скрыто, когда мы нажимаем $ tblcontents (меню)
  3. Мы будем вызывать переход BookBlock (), когда мы нажимаем пункт оглавления
  4. JScrollPane будет инициализирован на изменении размера окна

Таким образом, мы имеем.

function initEvents() {

 // Добавить навигацию события
 $navNext.on( 'click', function() {
 bb.next();
 return false;
 } );

 $navPrev.on( 'click', function() {
 bb.prev();
 return false;
 } );

 // Добавить стрелки для события
 $items.on( {
 'swipeleft' : function( event ) {
 if( $container.data( 'opened' ) ) {
 return false;
 }
 bb.next();
 return false;
 },
 'swiperight' : function( event ) {
 if( $container.data( 'opened' ) ) {
 return false;
 }
 bb.prev();
 return false;
 }
 } );

 // Показывать оглавление
 $tblcontents.on( 'click', toggleTOC );

 // Выберите пункт меню
 $menuItems.on( 'click', function() {

 var $el = $( this ),
 idx = $el.index(),
 jump = function() {
 bb.jump( idx + 1 );
 };

 current !== idx ? closeTOC( jump ) : closeTOC();

 return false;

 } );

 // Переинициализации jScrollPane
 $( window ).on( 'debouncedresize', function() {
 // Инициализировать jScrollPane
 setJSP( 'reinit' );
 } );

}

Мы будем анимировать бокового меню с переходом CSS. Если нет поддержки для переходов, то просто показать / скрыть меню.

function toggleTOC() {
 var opened = $container.data( 'opened' );
 opened ? closeTOC() : openTOC();
}

function openTOC() {
 $navNext.hide();
 $navPrev.hide();
 $container.addClass( 'slideRight' ).data( 'opened', true );
}

function closeTOC( callback ) {

 $navNext.show();
 $navPrev.show();
 $container.removeClass( 'slideRight' ).data( 'opened', false );
 if( callback ) {
 if( supportTransitions ) {
 $container.on( transEndEventName, function() {
 $( this ).off( transEndEventName );
 callback.call();
 } );
 }
 else {
 callback.call();
 }
 }

}

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Полноэкранный эффект переворота страниц

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


Полноэкранный эффект переворота страниц

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

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


Полноэкранный эффект переворота страниц

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

Полноэкранный эффект переворота страниц

Модальное окно «product quick view», анимированное с использованием CSS3 и Velocity.js, которое обеспечивает пользователю быстрый доступ к основной информации о продукте.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close