PageFlip: создание эффекта перелистывания страниц сайта

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

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

Если вы принадлежите к представителям старой школы и читаете бумажные книги, подписываетесь на газеты и просматриваете сайты любимых изданий в интернете, возможно, для вас привычней было бы, чтобы любимый проект был в удобной и более знакомой вам форме. PageFlip (перелистывание страниц) эффект — имитация книг. Ниже вам будут представлены некоторые уроки, плагины и примеры с использованием эффекта PageFlip. Итак. Давайте разберемся с некоторыми плагинами.

Плагины

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

1. WowBook

WowBook является плагином jQuery, который позволяет создавать онлайн-публикации (например, книги и журналы) с двумя разными эффектами на странице.

***

2. jQuery Flipbook слайдер

Flipbook слайдер представляет собой легкий плагин jQuery для перелистывания страниц сайта. Он может использоваться с любым контентом: текстом, HTML, фреймами, видео, flash (SWF) и т.д. Вы запросто сможете настроить плагин с CSS (фоновыми изображениями, шрифтами, цветами и т.д.). Плагин может быть использован для альбома, презентации, книги, блокнота и т.д.

***

3. imBookFlip: плагин jQuery с эффектом перелистывания и использованием технологии flash

Плагин imBookFlip можно загрузить в качестве книги в iframe или непосредственно на страницу. Страницы могут включаться в ручном режиме, в автоматическом при нажатии Auto Flip (автоматический поворот) — перелистывание будет осуществляться после того, как будет загружена страница, либо можно включить функцию перелистывания сразу по клику на обложку. Плагин также позволяет добавить звуковые эффекты при помощи Sound Manager.

***

4. Turn JS

Данный плагин представляет собой javascript библиотеку. С помощью нее можно превратить контент на сайте в настоящую книгу или журнальное издание и использованием HTML5.

***

5. jQuery Responsive FlipBook v5

jQuery плагин с возможностью создания двойных страниц с адаптивным дизайном, инструментов для масштабирования и форму Ajax.

***

6. Moleskine Notebook with jQuery flip page Booklet

Использование и настройка данного плагина не очень сложная.

***

Учебники

1. Fullscreen Pageflip Layout Using BookBlock Plugin

Учебник о том, как создать полноэкранный макет PageFlip с использованием BookBlock. Идея состоит в том, что доступ к контенту сайта в виде книги осуществляется через выдвигающуюся боковую панель меню.

***

2. CSS Page Flip

Учебник представляет чистый CSS и рамку 3D Page Flipping.

Преобразовать можно с помощью специального кода:

1 <ol id="foo">
2	<li>Page 1</li>
3	<li>Page 2</li>
4	<li>Page 3</li>
5 </ol>

В настоящий момент Page Flip с использованием анимации CSS3 работает в Safari и iPhone.

***

3. Page Flip эффект

Этот урок проведет вас через весь процесс создания собственного эффекта перелистывания страниц с помощью JavaScript.

***

4. Создание эффекта на странице

Джо Ламберт проведет вас через процесс создания потрясающего эффекта оформления страниц сайта с галереей изображений.

***

5. 3D Flipping Circle с CSS3 и jQuery

В этом уроке вы узнаете, как создать круг с ручкой, которая открывается при нажатии на нее, создавать реалистичные 3D-эффекты и перелистывать страницы с помощью CSS 3D преобразований и теней.

***

6. Верстка в InDesign

Преобразование веб-страниц сегодня стало намного проще с Adobe InDesign CS4.

***

Примеры

1. Мир фитнеса

***

2. Пэт Фэллон

***

3. Arcides

***

4. TV ADS

***

5. Mount Gay Rum

***

6. Douwe Egberts

***

Ждем ваших откликов!

Теперь пришло время вам поделиться своими мыслями об эффекте перелистывания страниц PageFlip. Приводите примеры, описывайте удобство плагинов и т.д. в комментариях ниже.

7 комментариев

  1. Жаль, что turnjs платный.

  2. Дмитрий

    Лучшая программа (по всем параметрам) для листания страниц: 3D PageFlip Professional. Дешевле в 10 раз аналога FlippingBook Publisher и функциональнее, особенно при загрузке видео в публикацию.
    Вот работающий пример программы: http://sadmordovii.ucoz.ru/files1/FlipBook3DMain.swf со встроенным видео.
    Дешево и сердито!

  3. Хорошая подборка плагинов, есть из чего выбрать, эффект перелистывания страниц создает впечатление читания книги.

  4. Алексей

    Админы, вы издеваетесь? А где форма подписки на новые посты? Ссори за офтоп, я думаю, админы потом удалят этот комментарий.

  5. If you need realistic Flipbooks that support 3D, PDF and Images.. you could try dFlip jquery flipbook plugin or the WordPress version.

  6. Хорошо, что есть такие плагины. Может потом попробую.

  7. Хорошая статья. Прям то что и искал по теме. Один вопрос остался – а есть бесплатные плагины для эффекта перелистывания страниц?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>