Повноекранна книга за допомогою jquery і css3

У наш час майже все є в онлайні - музика, фільми, ігри, книги. Ось останнє було значно зручніше читати якби книги імітували справжні книги, була анімація перегортання сторінок, зміст. І в цьому уроці ми створимо таку книгу, в якій будуть присутні всі ці елементи. В уроці ми будемо використовувати кілька jQuery плагінів, які допоможуть досягти потрібного ефекту.

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

Подивитися прімерСкачать

використовувані плагіни

Нам знадобляться наступні jQuery плагіни:

BookBlock
Custom jQuery ++
jScrollPane
jQuery Mouse Wheel Plugin
Custom Modernizr

HTML частина

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

123456789101112131415161718192021222324252627282930313233343536373839

lt;div id="Container" class="Container"gt;lt;div class="Menu-panel"gt;lt;h3gt; Змістlt;/h3gt;lt;ul id="Menu-toc" class="Menu-toc"gt;lt;li class="Menu-toc-current"gt; lt;a href="# Item1"gt; Сторінка 1lt;/agt; lt;/ligt;lt;ligt; lt;a href="# Item2"gt; Сторінка 2lt;/agt; lt;/ligt;lt;ligt; lt;a href="# Item3"gt; Сторінка 3lt;/agt; lt;/ligt;lt;ligt; lt;a href="# Item4"gt; Сторінка 4lt;/agt; lt;/ligt;lt;ligt; lt;a href="# Item5"gt; Сторінка 5lt;/agt; lt;/ligt;lt;/ulgt;lt;/divgt;lt;div class="Bb-custom-wrapper"gt;lt;div id="Bb-bookblock" class="Bb-bookblock"gt;lt;div class="Bb-item" id="Item1"gt;lt;div class="Content"gt;lt;div class="Scroller"gt;lt;h2gt; Сторінка 1lt;/h2gt;lt;pgt; ...lt;/pgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;div class="Bb-item" id="Item2"gt;lt;/divgt;lt;div class="Bb-item" id="Item3"gt;lt;/divgt;lt;div class="Bb-item" id="Item4"gt;lt;/divgt;lt;div class="Bb-item" id="Item5"gt;lt;/divgt;lt;/divgt;lt;a id="Bb-nav-prev" href="#"gt; lt;/agt;lt;a id="Bb-nav-next" href="#"gt; lt;/agt;lt;/navgt;lt;span id="Tblcontents" class="Menu-button"gt; Змістlt;/spangt;lt;/divgt;lt;/divgt;

CSS частина

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

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

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

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

1234567891011

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

Відео: Робимо слайдер карусель на html5, css3 і jquery

Визначаємо стиль посилань:

12345678

a {color: # 555-text-decoration: none-}a: hover {color: # 000-}

Головний контейнер з текстом займає всю ширину екрану 100х100 відсотків. А зміст у нас буде як би зрушувати частина з текстом при відкритті.

123456789101112

.container,.bb-custom-wrapper,.bb-bookblock {width: 100%-height: 100%-}.container {position: relative-left: 0px-transition: left 0.3s ease-in-out-}

Коли ми натискаємо на кнопку щоб розкрити зміст, ми додаємо ще один клас, в якому міститься ширина змісту:

123	.slideRight {left: 240px-}

Без javascript у нас не вийде динамічно привласнити властивість, тому відразу зробимо відступ зліва:

123	.no-js .container {padding-left: 240px-}

За замовчуванням зміст у нас зліва:

12345678910

.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 включений, ми можемо визначення від`ємного значення і заховати зміст:

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

Задамо стилі для елементів змісту:

123456789101112131415161718192021222324252627

.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-}

Також пропишемо стилі для стрілок, які також здійснюють «перегортання» сторінок:

Відео: jQuery. Урок 22. Зміна CSS стилів за допомогою jQuery

12345678910111213141516171819202122232425

.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-}

Зараз створимо маленьку іконку змісту:

1234567891011

.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-}

Відео: Shake Effect Login Form using HTML 5, CSS 3 & jQuery

Але в разі, коли javascript відключений, нам не потрібні елементи відкриття / закриття змісту, тому їх можна заховати:

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

Відео: Animated Sidebar Menu with jQuery and CSS3 - Transforming Hamburger Menu - Simple jQuery Tutorials

javascript частина

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

lt;script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"gt; lt;/scriptgt;lt;script src="Js / jquery.mousewheel.js"gt; lt;/scriptgt;lt;script src="Js / jquery.jscrollpane.min.js"gt; lt;/scriptgt;lt;script src="Js / jquerypp.custom.js"gt; lt;/scriptgt;lt;script src="Js / jquery.bookblock.js"gt; lt;/scriptgt;lt;script src="Js / page.js"gt; lt;/scriptgt;

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

Нам лише залишається вставити в кінці сторінки невеликої javascript код виклику функції:

lt;scriptgt; $ (function () {Page.init () -}) -lt;/scriptgt;

висновок

Дійсно гарна книга. Її читати було б дуже зручно, якщо б ті сайти, на яких можна читати книги онлайн, зробили це у виді такої ось книги # 128578; .

Успіхів!

джерело: https://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/

Поділися в соц мережах: