Эффект перелистывания страниц на jQuery

Полноэкранная разметка перелистывания страниц

От автора: данный урок посвящён созданию анимированного эффекта перелистыванию страниц с сайта с помощью плагинов jQuery. Идея состоит в том, чтобы перелистывать содержимое, как книгу, и переходить к страницам посредством появляющегося слева бокового меню.

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

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

Мы также применим jScrollPane от Кевина Лака (Kevin Luck) для добавления пользовательской полосы прокрутки содержимого там, где это требуется.

скачать исходникидемо

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

Демоверсия содержит выдержки из уморительной книги «Смешная медицина» А.Д. Крэбтри (“The Funny Side of Physic” by A. D. Crabtree) с сайта Project Gutenberg.

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

BookBlock от Педро Ботельо (Pedro Botelho)

Пользовательский jQuery++ от Битови (Bitovi)

jScrollPane от Кевина Лака (Kevin Luck)

Плагин jQuery Mouse Wheel от Брендона Аарона (Brandon Aaron)

Пользовательский Modernizr

Итак, давайте начнем создание эффекта перелистывания страниц!

Разметка

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

Элементы меню будут указывать на соответствующие страницы BookBlock’а (bb-item). Также добавим навигационные стрелки-указатели и кнопку переключения открытия и закрытия меню.

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

CSS

Заметьте, что здесь мы не станем использовать никаких специальных префиксов, но вы отыщете их в файлах.

Здесь мы не обсуждаем стиль плагина BookBlock (стили можно найти в bookblock.css), вместо этого сосредоточимся на остальных важных для разметки стилях, и пару штук из них модифицируем.

Начнем с импортирования шрифта Lato из веб-шрифтов Google:

Элемент html должен быть высотой в 100%, так как нам необходимо растянуть высоту внутренних элементов до высоты окна:

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

(Мы «зверски» сбрасываем отступы полей всех элементов; вам этого делать не нужно, вместо этого можно просто упорядочить соответствующие элементы.)

Давайте определим шрифт основного текста body и установим его высоту на 100%. Помните, что нам нужно определить ее из-за дочерних записей, которые будут абсолютными и тоже высотой в 100%:

Мы пользуемся Modernizr’ом и добавили к html-элементу класс “no-js”. При активированном JavaScript’е Modernizr заменит этот класс на “js”. Это даст нам возможность назначить элементам определенные свойства CSS, что при выключенном JavaScript’е не требуется. Наша разметка шириной и высотой в 100% имеет смысл, только если у нас активен JS, и тогда нам нужно, чтобы переполнение overflow у body было скрыто hidden:

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

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

Так, давайте установим ширину и высоту основного контейнера на 100% и добавим к контейнеру переход:

При щелчке на кнопку меню мы добавим к контейнеру другой класс, который установит значение left на 240 px (ширину бокового меню):

При деактивированном JavaScript’е мы не сможем этого сделать, поэтому давайте добавим вместо этого отступ слева:

Нам нужно, чтобы по умолчанию боковое меню было зафиксировано по левой стороне:

При активном JS мы установим position на absolute, а left на -240 px:

Давайте назначим стили элементам меню:

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

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

Кнопка меню будет расположена в левом верхнем углу, и ее текст мы скроем:

Давайте создадим маленькую иконку меню, воспользовавшись псевдоэлементом с двойной тенью блока применительно к верхней и нижней линиям:

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

Перейдем к внутренним частям элементов BookBlock’а. Раздел контента должен быть absolute, а также установим переполнение overflow на hidden. Это важно, потому что тут нам требуется применить свою модифицированную пользовательскую прокрутку, и сделаем мы это, только когда страница перевернута. Если не установить overflow на hidden, то мы увидели бы переполнение содержимого. И снова, это имеет смысл только при активном JS, поэтому добавим класс “js”:

Div scroller будет разрастаться вместе с контентом, поэтому давайте добавим сюда несколько отступов:

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

Давайте скроем острые края при прокрутке, добавив псевдоэлементы с градиентом от белого цвета до прозрачного к верху и низу div’а content:

Так текст будет смотреться слегка выцветшим. Добавим стили к элементам текста:

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

Последний медиазапрос немного изменит размер шрифта под меньшие устройства. В таких случаях очень облегчает задачу применение em’ов.

Вот и все стили!

JavaScript

Начнем с кэширования некоторых элементов и инициализации плагина BookBlock. Нам нужно кое-что установить после перелистывания каждой страницы, в основном указатель текущего элемента и поведение jScrollPane’а. Это определено в обратном вызове onEndFlip, передаваемом BookBlock’у.

Сначала привяжем события к некоторым ранее инициализированным элементам. Кроме того, нам следует инициализировать jScrollPane для первого (текущего) элемента.

Так как нам со временем придется инициализировать, реинициализировать и ликвидировать jScrollPane, давайте определим для этого функцию:

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

Мы вызовем методы BookBlock’а next() и prev() при щелчке на стрелки навигации или перелистывании страницы

TOC будет показываться/скрываться при щелчке на кнопку $tblcontents (меню)

Мы вызовем метод BookBlock’а jump() при щелчке на элемент

jScrollPane будет инициализироваться при изменении размера окна

Итак, вот мы где:

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

Открывая текущий контент, нужно скрыть навигационные стрелки-указатели, а снова показываем мы их лишь после закрытия текущщего контента.

Анимировать боковое меню мы будем с помощью перехода CSS. Если поддержка переходов отсутствует, то следует применить простую альтернативу show/hide:

Уффф! 🙂 Вот так мы и создали с вами на сайте, эффект перелистывания страниц! Надеюсь, вам понравился и оказался полезен этот учебник!

Автор: Mary Lou

Источник: //tympanus.net/

Редакция: Команда webformyself.

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (2)