Лого www.SiteHere.ru

Полноэкранная книга с помощью jQuery и CSS3

Полноэкранная книга с помощью jQuery и CSS3

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

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

Посмотреть примерСкачать

Используемые плагины

Нам понадобятся следующие jQuery плагины:

  1. BookBlock
  2. Custom jQuery++
  3. jScrollPane
  4. jQuery Mouse Wheel Plugin
  5. Custom Modernizr

HTML часть

Создадим структуру книги из тех элементов, из которых она обычно состоит(стрелки на следующую и предыдущую страницу, кнопка вызова оглавления и само оглавление, а также каждую страницу в отдельном блоке с классом bb-item и идентификатором item#):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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">Страница 1</a></li>
            <li><a href="#item2">Страница 2</a></li>
            <li><a href="#item3">Страница 3</a></li>
            <li><a href="#item4">Страница 4</a></li>
            <li><a href="#item5">Страница 5</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>Страница 1</h2>
                        <p>...</p>
                    </div>
                </div>
            </div>
 
            <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>
        <nav>
            <a id="bb-nav-prev" href="#"></a>
            <a id="bb-nav-next" href="#"></a>
        </nav>
        <span id="tblcontents" class="menu-button">Содержание</span>
    </div>
</div>

CSS часть

Все стили плагина BookBlock находятся в файле bookblock.css.

Сначала подключаем необходимый шрифт:

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

Книга у нас будет на всю высоту, поэтому высоту выставляем 100%. Также прописываем цвет и шрифт текста:

1
2
3
4
5
6
7
8
9
10
11
html {
    height: 100%;
}
 
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 400;
    font-size: 100%;
    color: #333;
    height: 100%;
}

Определяем стиль ссылок:

1
2
3
4
5
6
7
8
a {
    color: #555;
    text-decoration: none;
}
 
a:hover {
    color: #000;
}

Главный контейнер с текстом занимает всю ширину экрана 100х100 процентов. А оглавление у нас будет как бы сдвигать часть с текстом при открытии.

1
2
3
4
5
6
7
8
9
10
11
12
.container,
.bb-custom-wrapper,
.bb-bookblock {
    width: 100%;
    height: 100%;
}
 
.container {
    position: relative;
    left: 0px;
    transition: left 0.3s ease-in-out;
}
Книга на всю ширину окна

Когда мы нажимаем на кнопку чтобы раскрыть оглавление, мы добавляем еще один класс, в котором содержится ширина оглавления:

1
2
3
.slideRight {
    left: 240px;
}

Без Javascript у нас не получится динамически присвоить свойство, поэтому сразу сделаем отступ слева:

1
2
3
.no-js .container {
    padding-left: 240px;
}

По умолчанию оглавление у нас слева:

1
2
3
4
5
6
7
8
9
10
.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);
}
Оглавление слева

Когда Javascript включен, мы можем задать отрицательное значение и спрятать оглавление:

1
2
3
4
.js .menu-panel {
    position: absolute;
    left: -240px;
}

Зададим стили для элементов оглавления:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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;
}

Навигация по страницам находится всегда вверху и она зафиксирована:

1
2
3
4
5
6
.bb-custom-wrapper nav {
    top: 20px;
    left: 60px;
    position: absolute;
    z-index: 1000;
}
Навигация по страницам

Также пропишем стили для стрелок, которые также осуществляют «перелистывание» страниц:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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;
}

Кнопка открытия/закрытия оглавления располагается в левом верхнем углу:

1
2
3
4
5
6
.menu-button {
    z-index: 1000;
    left: 20px;
    top: 20px;
    text-indent: -9000px;
}
Кнопка открытия/закрытия оглавления

Сейчас создадим маленькую иконку оглавления:

1
2
3
4
5
6
7
8
9
10
11
.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;
}

Но в случае, когда Javascript отключен, нам не нужны элементы открытия/закрытия оглавления, поэтому их можно спрятать:

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

Javascript часть

Подключаем все необходимые плагины в конце страницы:

1
2
3
4
5
6
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script src="js/page.js"></script>

Всё необходимое для правильной работы с классами, которые заданы сейчас, прописано в файле page.js.

Нам лишь остается вставить в конце страницы небольшой Javascript код вызова функции:

1
2
3
4
5
<script>
    $(function() {
        Page.init();
    });
</script>

Вывод

Действительно красивая книга. Ее читать было бы очень удобно, если бы те сайты, на которых можно читать книги онлайн, сделали это в виде такой вот книги 🙂 .

Успехов!

Источник: http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/

Полноэкранная книга с помощью jQuery и CSS3 3.00/5 (60.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

11 комментариев к записи
  • Александр

    Действительно красивая книга получилась. Спасибо. И вообще, всегда с интересом читаю Ваши статьи!
    😎

     
    • Юрий

      Спасибо, Александр. Приятно видеть что не зря пишу 🙂

       
  • valentina

    Добрый день . Большое спасибо книга получилась. Подскажите пожалуйста как еще добавить страниц. Желаю счастья и удачи.

     
    • Юрий

      Спасибо, Валентина! Чтобы добавить еще одну страницу нужно после блока (там где закрывается тег </div>) с классом «bb-item» и идентификатором «item5» (то есть мы добавляем 6-ю страницу), вставить следующий код:

      <div class="bb-item" id="item6">
      <div class="content">
      <div class="scroller">
      <h2>Страница 6</h2>
      <p>Ваш текст</p>
      </div>
      </div>
      </div>

      Если что-то не получается — обязательно пишите. 🙂

       
  • Олег

    Добрый день . Подскажите пожалуйста как добавить страницу динамически. Т.е. у меня есть несколько , а я хочу уже к имеющимся добавить еще одну «на-лету»? спасибо.

     
    • Юрий

      Олег, здравствуйте! Например вы добавите еще одну страницу, но нужно придумать где ее хранить, в базе данных? Тогда нужно еще на PHP написать код записи в БД. Ведь если вы выйдете из браузера, а потом заново зайдете — ваша страница исчезнет.

       
  • Вячеслав

    Добрый день, Юрий, подскажите, можно ли прикрутить данное чудо к сайту на WordPress, чтобы контент в книге выводился из записи

     
    • Юрий

      Здравствуйте, Вячеслав. Такое сделать можно, ведь это всего лишь разметка страницы.

       
  • Валерий

    Добрый день. Подскажите где находится сам скрипт для перелистывания страниц

     
    • Юрий

      Здравствуйте. Скрипт находится в файле jquery.bookblock.js.

       
  • Валерий

    Здравствуйте. Не подскажите можно ли добавить кнопку для прокрутки в начало страницы, я перепробовал кучу кодов, но ничего не работает.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *