Компьютерные технологии глубоко проникли в нашу жизнь. Каждое действие, которое мы делаем с помощью компьютеров, сопровождается работой специальных приложений. Даже ярлыки, которые мы сохраняем на рабочем столе, обрабатывает специальная программа. Многие из нас уже сегодня, беря в руку ручку, ловят себя на мысли, что постепенно забывают, как писать.
Что-то подобное происходит и с книгами. Все меньше остается таких людей, которые читают бумажные книги. Гораздо проще читать электронные книги, которые значительно дешевле бумажных или же и вовсе доступны для бесплатного скачивания.
Если вы принадлежите к представителям старой школы и читаете бумажные книги, подписываетесь на газеты и просматриваете сайты любимых изданий в интернете, возможно, для вас привычней было бы, чтобы любимый проект был в удобной и более знакомой вам форме. PageFlip (перелистывание страниц) эффект - имитация книг. Ниже вам будут представлены некоторые уроки, плагины и примеры с использованием эффекта PageFlip. Итак, давайте разберемся с некоторыми плагинами.
jQuery плагины с эффектом перелистывания страниц подойдут для сайтов с большим количеством текста и изображений. Вместо однообразного и скучного отображения текстов, ссылок и изображений на страницах сайта, с эффектом перелистывания страниц вы сможете сделать презентацию проекта более интерактивной и анимированной.
Этот плагин позволит вам встраивать публикации, созданные с помощью FlippingBook Publisher и FlippingBook Online, одним шагом без внесения изменений в код.
Easy Flip Flip – это плагин, с которым вы сможете создать виртуальный журнал в несколько кликов.
3D FlipBook – это программа просмотра PDF или WordPress плагин, который позволяет просматривать изображения, PDF-файлы или HTML-файлы в виде перелистывания.
***
A Page Flip Book для WordPress – это самый простой способ управлять виртуальными 3D-книгами, которые вы можете просматривать с помощью мыши.
Вы также можете выбрать фоновое изображение или текстуру, если вам это нужно.
Photo Book Gallery позволяет создавать адаптивные флип-книги из изображений. Вы можете настроить свои книги с помощью набора параметров. Плагин прост в использовании и отлично работает на мобильных устройствах.
GoWorks Flip Clock отображает на ваших страницах и сообщениях элегантные ретро-флип-часы. Плагин идеально подходит для привлечения внимания к важной информации, имеет привлекательный визуальный эффект.
Учебник о том, как создать полноэкранный макет PageFlip с использованием BookBlock. Идея состоит в том, что доступ к контенту сайта в виде книги осуществляется через выдвигающуюся боковую панель меню.
Учебник представляет чистый CSS и рамку 3D Page Flipping.
Преобразовать можно с помощью специального кода:
1
В настоящий момент Page Flip с использованием анимации CSS3 работает в Safari и iPhone.
Этот урок проведет вас через весь процесс создания собственного эффекта перелистывания страниц с помощью JavaScript.
Джо Ламберт проведет вас через процесс создания потрясающего эффекта оформления страниц сайта с галереей изображений.
В этом уроке вы узнаете, как создать круг с ручкой, которая открывается при нажатии на нее, создавать реалистичные 3D-эффекты и перелистывать страницы с помощью CSS 3D преобразований и теней.
Интересным усовершенствованием гипертекстового pdf-документа может стать добавление в него эффекта перелистывания страниц. Кроме этого в документ можно интегрировать элементы мультмедиа: вставить изображения, добавить звук и видео.
Где и для чего может пригодиться такая игрушка - мультимедийный документ? Наверное, в первую очередь при создании презентаций. Оригинальные дополнительные эффекты украсят слайд-шоу и добавят информативности материалам. Эксклюзивным подарком или архивом будет фотоальбом с перелистыванием, музыкальным сопровождением и голосовыми комментариями. Также, такие мультимедийные привлекательные 3D-документы и книги используются как обучающие ресурсы способствующие лучшему усвоению материала.
Опробуем некоторые инструменты для конструирования этих замечательных инфопродуктов.
Популярным десктопным приложением является программа Flip Builder. Скачиваем этот конструктор для перелистывания pdf-документов с официального сайта разработчика. Открываем главную страницу адресом: flipbuilder.com и кликом по флагу РФ русифицируем ее. Нажимаем кнопку "Узнать подробнее", переходим на страницу загрузки и кнопкой "Скачать" начинаем процесс скачивания. По завершении загрузки распаковываем zip-архив и запускаем установочный файл: flip-pdf-pro.exe
Проходим по шагам мастера установки и в заключительном окне нажимаем кнопку "Попробовать". После этого открывается интерфейс приложения и начинаем работать.
Нажимаем зеленую кнопку "Создать новый". Появляется окно "Импортировать PDF", в котором кнопкой "Просмотр" открываем проводник и выбираем на компьютере подготовленный к преобразованию pdf-файл. Затем нажимаем кнопку "Ипортировать сейчас":
Через некоторое время документ открывается в приложении и готов к перелистыванию. Теперь можно заняться редактированием и добавить в него дополнительные элементы.
Сначала для оформления документа потренируемся с шаблонами. Шаблоны, как указано в комментариях к ним, отличаются не только внешним видом, но и функциями:
Выбрав подходящий шаблон развернем меню его настроек. Изменяя значения элементов в списке можно поднастроить режимы отображения панелей, кнопок управления и многое другое:
Закончили с шаблоном и переходим в раздел редактирования.
Далее, для примера, я подробно покажу как делал мультимедийную брошюру - небольшой исторический экскурс по родному краю. Написал книгу про Алматы. Написал, это конечно, громко сказано. Накопипастил из разных источников описания важных, на мой взгляд, событий из истории города. По необходимости отредактировал их и расположил в хронологическом порядке. Проиллюстрировал содержание подходящими картинками. Все эти операции я проделал в ворде. После этого пронумеровал страницы начиная с третьей и создал интерактивное оглавление, как было описано в уроке: гиперссылка в ворде . Затем сохранил документ из ворда в формат PDF.
Для озвучивания я предварительно подготовил для каждой страницы аудиофайлы в формате mp3 - объединял текстовые дорожки с фоновыми треками. Микширование звука я производил приложением Audacity. Скачать последнюю версию программы можно с официального сайта разработчиков по адресу: http://www.audacityteam.org
Подключив аудио-гарнитуру можно с микрофона записывать звук в редактор напрямую - создавать голосовой трек или импортировать заранее подготовленные аудиофайлы. Легкая в освоении, интуитивно понятная программа, где каждый инструмент имеет всплывающую подсказку. При установке выбираем русский язык. Готовый аудио-проект экспортируем и сохраняем в файл формата mp3.
Вернемся к конструктору Flip PDF Professional.
В редакторе флип-страниц этой программы кнопкой "more" развернем список дополнительных элементов и выберем отдел "Добавить звуковой проигрыватель":
Появится окно "Sound Type" - тип плейера, где выберем вид проигрывателя, после чего вставим его на открытую страницу документа:
Теперь, в правой трети окна редактора нажав кнопку "Выбрать звуки" пройдем в проводник, найдем на компьютере заранее подготовленный для этой страницы аудиофайл и откроем его:
В этом же разделе настроим режимы работы плейера. Запуск воспроизведения я назначил при щелчке по проигрывателю, чтобы у читателя был выбор: читать самому или слушать. А выключение звука выбрал при выходе со страницы:
Также в этом окне можно подредактировать обложку плейера.
Таким образом устанавливаем проигрыватели с соответствующими аудиофайлами на все выбранные для озвучивания страницы документа. Закончив редактирование сохраняем изменения кнопкой "Сохранить и выйти", которая находится в правом верхнем углу.
Для публикации готового мультимедийного документа кнопкой "Конвертировать" откроем список предлагаемых форматов и выберем подходящий:
Скачать в архиве и посмотреть интерактивную брошюру в этом формате можно по ссылке: .
Как стимул к приобретению своего продукта разработчики флип-билдера применили водяной знак. Действительно, такое клеймо в центре каждой страницы документа делает его непригодным для демонстрации или распространения:
Но зато, в демо-приложении этого конструктора нет ограничений по объему документа, в отличие от аналогичной программы FlippingBook, например, где в пробную версию загружается только десять страниц.
В этом небольшом обзоре показан пример образования несложного мультимедийного документа с навигацией и аудиосопровождением. Используя и другие возможности редактирования можно создавать в конструкторе еще более интересные и эффектные проекты.
Многие сайты используют подобные jQuery-плагины для предоставления каталогов продукции, продающих брошюр и так далее, и все это не просто так. jQuery-решения, позволяющие вам листать блоки контента, предлагают вам пользователям очень удобный способ ознакомиться с тем, что вы готовы предложить им. Если все сделать правильно, но такие электронные брошюры будут работать не хуже настоящих напечатанных, которые можно держать в руках. При помощи специальных плагинов, вы можете позволить посетителям вашего сайта без труда перелистывать страницы и чувствовать, будто они читают настоящую книгу.
Использование jQuery-плагинов с эффектом перелистывания позволит вам представлять содержимое вашего сайта в более привлекательной манере. Перед тем, как выбрать подходящее вам решение, вам следует получить некоторый технический навык. Некоторые плагины до сих пор основываются на Flash, и поэтому они не позволяет пользователям осуществлять поиск материала соответствующим образом и, к тому же, они не будут работать на iOS-устройствах. Это отрицательно сказывается на seo-оптимизации, а также приведет к тому, что пользователи просто не найдут интересующую их информацию. Плагины перелистывания на базе jQuery позволяют вам избежать всех этих проблем. Чтобы помочь вам найти подходящий скрипт, сегодня мы решили предложить вам подборку одних из лучших jQuery-плагинов для реализации эффекта перелистывания.
Эта подборка состоит из более, чем 20 jQuery-плагинов соответствующего предназначения, которые позволят вам реализовать механизм перелистывания страниц. У каждого представленного плагина есть свои уникальные свойства, поэтому мы предлагаем вам ознакомиться со всеми по очереди. После чего, хотелось бы, чтобы вы высказали свое мнение о выбранном вами плагине, чтобы помочь другим читателям избежать рутинных поисков. Заранее предупреждаем, что часть предоставленных решений являются платными.
CSS3 анимация перелистывания страниц
В буржунете я подсмотрел технику перелистывания страниц реализованную на CSS3. Очень эффектно! На основе этой техники я решил сделать свой пример демонстрацию такой CSS3 книги с анимацией перелистывания страниц.
В основе этой техники лежат такие CSS3 свойства как transform
и transition
а так же нестандартное использование тега input
с флажком (checkbox). Реализация получилась кривенькая, потому как браузеры ещё полноценно не поддерживают самые эффектные CSS3 свойства в прямом виде. Но, благодаря , мы можем этими свойствами попробовать воспользоваться уже сейчас.
Получилось эффектно, радует то что возможно в скором будущем браузеры начнут понимать новые стандарты CSS3 и вебмастера смело смогут реализовывать подобную красоту на своих сайтах, стало возможно листать страницы на CSS3.
Пример лучше всего смотреть браузером Mozilla Firefox
последней версии - работает всё без проблем. В Safari и Chrome пример работает, но уже со скрипом. Opera при анимации сжирает процессор, поэтому на слабых компьютерах пример просто не потянет. IE - это IE ради прикола можно и им посмотреть.
Смотрим браузером Mozilla Firefox
- не портим впечатление!
Техника листания страниц уже несколько лет присутствует во Flash. Тем не менее, не все реализации одинаковы. Обычно, качественные компоненты для эффекта листания страниц, которые можно купить, значительно отличаются от тех бесплатных руководств, которые вы найдете онлайн. Самое большое отличие заключается в диапазоне движения для уголка страницы. Большинство бесплатных руководств предлагают фиксированный радиус пути вместо использования более широкого диапазона движения. Другими словами, не имеет значения куда вы потяните мышкой страницу, уголок всегда будет двигаться по одной и той же кривой от одной стороны до другой. Математика для такой техники достаточно проста и варианты ее реализации можно найти повсюду. Любопытно, что качественные компоненты с эффектом листания страниц позволяют использовать значительно больший диапазон движений, что позволяет достичь эффектов гораздо большего качества. И о том как этого достичь никто не говорит!
. [Скачать BlogPageFlipStudy01.zip ]PageFlipStudy01 устанавливает фреймворк для тех целей, которые нам нужны. Пожалуйста, ознакомьтесь с ним внимательно, так как следующие три стадии будут построены каждая друг над другом. Если вы откроете первый архив, то обнаружите решение всего с двумя элементами MainPage.xaml и Dot.xaml, которые созданы для визуализации переменных. Если вы посмотрите на код MainPage.xaml.cs, то обнаружите функция loaded() в основном занимается тем, что инициализирует переменные и устанавливает обработчики событий мыши. Вся логика происходит в цикле анимации CompositeTarget.Rendering(). Ключевые переменные перечислены ниже:
Самая важная переменная на этом этапе – это наше подсчитанное ограничение corner (точка C выше). Я никогда не использую данные позиции от событий мыши напрямую, вместо этого, я создаю последователя (переменную follow ), которая облегчает получение позиции мыши. Тем не менее, для того, чтобы листание страницы работало, требуется точка ограничения (Constraint), которая указывает позицию уголка страницы, для того чтобы ограничить максимальную ширину страницы. Другими словами, линия SB > C не может быть больше чем линия SB > EB .
В оригинале вместо изображения - интерактивное SL-приложение. Перейдите на страницу оригинальной статьи, чтобы попробовать пример вживую. [Скачать BlogPageFlipStudy02.zip ]В PageFlipStudy02 мы добавляем дополнительное ограничение по радиусу R2 для того, чтобы определить максимальную дистанцию, на которую уголок страницы может быть отдален от верха корешка (точка ST выше). Другими словами, линия ST > C не может быть больше, чем линия которая соединяет ST и R2 . Ниже представлен код дополнительного ограничения для второго радиуса:
Теперь, когда точка уголка С ограничено по обоим радиусам, мы можем взяться за решение основной задачи: критического треугольника. Критический треугольник получается взятием точки пересечения биссектрисы угла SB с прямой СEB (точка T0). Перпендикуляр от этой точки даст точку T2 , а завершит треугольник точка T1 . Критический треугольник используется для управления как местоположением, так и вращением объекта страницы, кроме того, треугольник служит нам как определитель границ. Ниже код с подсчетом треугольника:
Вы можете поэкспериментировать с этим кодом для того, чтобы посмотреть как он влияет на конечный результат.
В оригинале вместо изображения - интерактивное SL-приложение. Перейдите на страницу оригинальной статьи, чтобы попробовать пример вживую. [Скачать BlogPageFlipStudy03.zip ]Самое значительно изменение в PageFlipStudy03 - это добавление элемента управления pageBack.xaml, который содержит необходимую для отображения графику. Если вы взгляните на элемент управления, вы заметите, что обе точки позиции и вращения элемента управления приходятся на ее точку нижнего левого угла. Это имеет значение, так как когда страница пролистана, уголок за который вы ее листали становится левым нижним. В MainPage.xaml.cs, позиционирование и вращение страницы вычисляется следующим образом:
Важной частью реализации является то, что угол определенный T2 и C определяет необходимое вращение страницы при перемещении мыши в точку С . Вы можете определить угол в радианах выполнив операцию Math.atan2() над переменными указанными выше. Получив значение тангенса вы можете установить угол вращения страницы в это значение после конвертации в градусы из радиан (умножив Math.PI/180.0). Таким образом страница при листании всегда будет пересекать T2 .
В оригинале вместо изображения - интерактивное SL-приложение. Перейдите на страницу оригинальной статьи, чтобы попробовать пример вживую. [Скачать BlogPageFlipStudy04.zip ]На этой стадии, вы должны представлять себе всю логику требующуюся для правильного ограничения и вращения страницы. Последний важный шаг, тем не менее, состоит в определении вырезанного региона (clipping region), который так же будет являться частью анимации, для определения того, как какая часть страницы должна быть видима во время листания. Так как цель данного руководства состоит в демонстрации математического аппарата техники, я оставлю прямоугольник видимым для того, чтобы вы видели что же происходит на самом деле. Красный прямоугольник выше, который дает мне точки для вырезанного региона, был создан в зависимости от того, где находится T2 . Вы можете посчитать его местоположение и вращение следующим образом:
Когда мы захотим реализовать решение, объект красного прямоугольника использованный выше должен быть конвертирован в коллекцию сегментов фигуры (Path figure segments) с PathGeometry внутри, которая определит вырезанный регион для элемента управления страницы (поверьте мне, это проще сделать так, чем пытаться производить комплексное вращение на вырезанном пути). Хорошая новость состоит в том, что класс GeneralTransform в Silverlight позволяет сделать это очень легко:
И это все! Фиолетовый регион на картинке сверху, образованный пересечением синей страницы и красного прямоугольника определяет какая часть страницы должна быть видима во время листания страницы. Используя подсчитанные значения точек, вы можете конвертировать прямоугольник в правильные значения pathGeometry, которые позволят вырезать элемент управления страницы, создавая вид того, что страницы листается. Вся эта тригонометрия определяет математический аппарат эффекта качественного листания страниц. Имея эти знания, вы можете структурировать их, для того, чтобы добавить тени или добавить еще несколько страниц. Листание слева направо – это просто зеркальное отображение геометрии, а листание сверху вниз - это простое инвертирование. Я оставляю вам возможность поиграть с тенями и добавлением логики для обработки страниц. Получайте удовольствие!
