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

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

Мы будем также использовать 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 будет содержать обертку (которые мы будем применять плагин) и структуру, что нужно для плагина. Внутри каждого элемента, мы добавим содержание оболочки с разделением, что нам нужно для функциональности пользовательской.

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

Шаг 2. CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 3. JavaScript

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

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

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

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

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

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

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

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