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. Приводите примеры, описывайте удобство плагинов и т.д. в комментариях ниже.

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

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

  2. Дмитрий

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

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

  4. Алексей

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

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

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

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