Урок: перелистывание документа. Секреты и техника качественного эффекта листания страниц

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

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

Если вы принадлежите к представителям старой школы и читаете бумажные книги, подписываетесь на газеты и просматриваете сайты любимых изданий в интернете, возможно, для вас привычней было бы, чтобы любимый проект был в удобной и более знакомой вам форме. 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 2

Page 1

3

Page 2

4

Page 3

5

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

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

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

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

• Перевод

Техника листания страниц уже несколько лет присутствует во Flash. Тем не менее, не все реализации одинаковы. Обычно, качественные компоненты для эффекта листания страниц, которые можно купить, значительно отличаются от тех бесплатных руководств, которые вы найдете онлайн. Самое большое отличие заключается в диапазоне движения для уголка страницы. Большинство бесплатных руководств предлагают фиксированный радиус пути вместо использования более широкого диапазона движения. Другими словами, не имеет значения куда вы потяните мышкой страницу, уголок всегда будет двигаться по одной и той же кривой от одной стороны до другой. Математика для такой техники достаточно проста и варианты ее реализации можно найти повсюду. Любопытно, что качественные компоненты с эффектом листания страниц позволяют использовать значительно больший диапазон движений, что позволяет достичь эффектов гораздо большего качества. И о том как этого достичь никто не говорит!

Листание страниц для Silverlight Сегодня мы займемся объяснением математической реализации качественного эффекта листания страниц для Silverlight. Реализация на Silverlight, которую можно посмотреть выше [в статье приложено видео, реализация на Silverlight доступна в блоге у автора ], была сделана с использованием тригонометрии, техники “clever masking” и небольшим эффектом «smoke and mirrors» для теней. Как и в большинстве моих статей, реализация эффекта разбита на механическую часть (математика) и на часть представления (трюки рендеринга). Так как Silverlight и Flash поддерживают механику маскирования, обрезания и трансформации по-разному, это руководство нацелено в основном на Silverlight-разработчиков. Тем не менее, математические секреты в технике листания страниц применимы и для разработчиков, которые делают интерактивные приложения на других языках, так как это руководство сфокусировано на объяснении механики перемещения для решения задачи.Шаг 1: следуй за мышкой, удерживая уголок . [Скачать BlogPageFlipStudy01.zip ] PageFlipStudy01 устанавливает фреймворк для тех целей, которые нам нужны. Пожалуйста, ознакомьтесь с ним внимательно, так как следующие три стадии будут построены каждая друг над другом. Если вы откроете первый архив, то обнаружите решение всего с двумя элементами MainPage.xaml и Dot.xaml, которые созданы для визуализации переменных. Если вы посмотрите на код MainPage.xaml.cs, то обнаружите функция loaded() в основном занимается тем, что инициализирует переменные и устанавливает обработчики событий мыши. Вся логика происходит в цикле анимации CompositeTarget.Rendering(). Ключевые переменные перечислены ниже:

• M – позиция мыши, устанавливается событием MouseMove();
• F – последователь мыши, который позволяет нам упрощенно обрабатывать исходную позицию мыши;
• C – точка ограничения, которая определяет где уголок страницы должен быть;
• R1 – точка радиуса на ограничительной окружности, дуга которой определяет максимальную ширину разрешенную для страницы;
• SC – центр корешка;
• SB – низ корешка;
• EB – нижний правый угол.

Ниже показана основная логика ограничения в цикле анимации:

Самая важная переменная на этом этапе – это наше подсчитанное ограничение corner (точка C выше). Я никогда не использую данные позиции от событий мыши напрямую, вместо этого, я создаю последователя (переменную follow ), которая облегчает получение позиции мыши. Тем не менее, для того, чтобы листание страницы работало, требуется точка ограничения (Constraint), которая указывает позицию уголка страницы, для того чтобы ограничить максимальную ширину страницы. Другими словами, линия SB > C не может быть больше чем линия SB > EB .

Шаг 2: добавление второго ограничения и определение критического треугольника

В оригинале вместо изображения - интерактивное SL-приложение. Перейдите на страницу оригинальной статьи, чтобы попробовать пример вживую. [Скачать BlogPageFlipStudy02.zip ] В PageFlipStudy02 мы добавляем дополнительное ограничение по радиусу R2 для того, чтобы определить максимальную дистанцию, на которую уголок страницы может быть отдален от верха корешка (точка ST выше). Другими словами, линия ST > C не может быть больше, чем линия которая соединяет ST и R2 . Ниже представлен код дополнительного ограничения для второго радиуса:

Теперь, когда точка уголка С ограничено по обоим радиусам, мы можем взяться за решение основной задачи: критического треугольника. Критический треугольник получается взятием точки пересечения биссектрисы угла SB с прямой СEB (точка T0). Перпендикуляр от этой точки даст точку T2 , а завершит треугольник точка T1 . Критический треугольник используется для управления как местоположением, так и вращением объекта страницы, кроме того, треугольник служит нам как определитель границ. Ниже код с подсчетом треугольника:

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

Шаг 3: добавление страницы и вращение угла

В оригинале вместо изображения - интерактивное SL-приложение. Перейдите на страницу оригинальной статьи, чтобы попробовать пример вживую. [Скачать BlogPageFlipStudy03.zip ] Самое значительно изменение в PageFlipStudy03 - это добавление элемента управления pageBack.xaml, который содержит необходимую для отображения графику. Если вы взгляните на элемент управления, вы заметите, что обе точки позиции и вращения элемента управления приходятся на ее точку нижнего левого угла. Это имеет значение, так как когда страница пролистана, уголок за который вы ее листали становится левым нижним. В MainPage.xaml.cs, позиционирование и вращение страницы вычисляется следующим образом:

Важной частью реализации является то, что угол определенный T2 и C определяет необходимое вращение страницы при перемещении мыши в точку С . Вы можете определить угол в радианах выполнив операцию Math.atan2() над переменными указанными выше. Получив значение тангенса вы можете установить угол вращения страницы в это значение после конвертации в градусы из радиан (умножив Math.PI/180.0). Таким образом страница при листании всегда будет пересекать T2 .

Шаг 4: Определение региона, который нужно показывать (Clipping Region)

В оригинале вместо изображения - интерактивное SL-приложение. Перейдите на страницу оригинальной статьи, чтобы попробовать пример вживую. [Скачать BlogPageFlipStudy04.zip ] На этой стадии, вы должны представлять себе всю логику требующуюся для правильного ограничения и вращения страницы. Последний важный шаг, тем не менее, состоит в определении вырезанного региона (clipping region), который так же будет являться частью анимации, для определения того, как какая часть страницы должна быть видима во время листания. Так как цель данного руководства состоит в демонстрации математического аппарата техники, я оставлю прямоугольник видимым для того, чтобы вы видели что же происходит на самом деле. Красный прямоугольник выше, который дает мне точки для вырезанного региона, был создан в зависимости от того, где находится T2 . Вы можете посчитать его местоположение и вращение следующим образом:

Когда мы захотим реализовать решение, объект красного прямоугольника использованный выше должен быть конвертирован в коллекцию сегментов фигуры (Path figure segments) с PathGeometry внутри, которая определит вырезанный регион для элемента управления страницы (поверьте мне, это проще сделать так, чем пытаться производить комплексное вращение на вырезанном пути). Хорошая новость состоит в том, что класс GeneralTransform в Silverlight позволяет сделать это очень легко:

И это все! Фиолетовый регион на картинке сверху, образованный пересечением синей страницы и красного прямоугольника определяет какая часть страницы должна быть видима во время листания страницы. Используя подсчитанные значения точек, вы можете конвертировать прямоугольник в правильные значения pathGeometry, которые позволят вырезать элемент управления страницы, создавая вид того, что страницы листается. Вся эта тригонометрия определяет математический аппарат эффекта качественного листания страниц. Имея эти знания, вы можете структурировать их, для того, чтобы добавить тени или добавить еще несколько страниц. Листание слева направо – это просто зеркальное отображение геометрии, а листание сверху вниз - это простое инвертирование. Я оставляю вам возможность поиграть с тенями и добавлением логики для обработки страниц. Получайте удовольствие!

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

В этой статье мы будем использовать PHP и плагин turns.js, которые позволят реализовать эффект перелистывания страницы на чистом CSS3 и jQuery. Мы возьмем наиболее популярные картинки из Instagram.com и создадим красивый журнал.

HTML

Прежде всего нам нужно понять основы этого примера. Мы будем использовать простой дизайн странички, который совмещает HTML5 разметку и PHP в одном файле. Так будет проще понимать. Вы можете видеть результат выполнения ниже:

index.php

Здесь мы подключаем style. css , в head, и javascript файлы внизу. Далее мы подключаем еще 3 js файла: библиотека jQuery, turn.js, script.js, в котором мы будем инициализировать плагин и принимать события клавиатуры. PHP код, который мы напишем немножечко позже, будет выполнятся в #magazine div блоке. PHP будет генерировать странички нашего журнала, которые будут нужны для turn.js.

Как пример, вы можете посмотреть на три первых страницы журнала, сгенерированных с помощью PHP:

1 // 32 2 // 32 3 // 32

Код который вы видели, полностью лежит в блоке #magazine div. Это единственное, что нужно для turns.js. Вам не нужно создавать какие-то специальные классы или дата атрибуты для элементов, которые будут интерпретированы в странички. На этом мы готовы приступить к написанию PHP кода!

PHP

PHP будет соединяться с Intagram API, кешировать результаты, и генерировать разметку, которую вы видели выше.

Первым шагом будет регистрация Instagram девелоперского сайта. После чего вы получите client_ id ключ, который вставим как значение в переменную $instagramClientID , в файле index. php . Мы не нуждаемся в расширенной функциональности API, мы просто запросим наиболее популярные картинки. Это освободит нас от использования дополнительной OAuth аутентификации, которая только утруднит понимание кода.

Ниже пример JSON ответа текущих популярных картинок от Instagram. Я скрыл некоторые атрибуты, чтобы сделать код более понятным.

{ "meta": { "code": 200 }, "data": [{ "tags": ["beautiful", "sky"], "location": "null", "comments": { "count": 31, "data": [...] }, "filter": "Normal", "created_time": "1331910134", "link": "http:\/\/instagr.am\/p\/IPNNknqs84\/", "likes": { "count": 391, "data": [..] }, "images": { "low_resolution": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_6.jpg", "width": 306, "height": 306 }, "thumbnail": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_5.jpg", "width": 150, "height": 150 }, "standard_resolution": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg", "width": 612, "height": 612 } }, "caption": { "created_time": "1331910148", "text": "Goodnight.\ue056", "from": { "username": "jent99", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "id": "6227738", "full_name": "jent99" }, "id": "148395540733414783" }, "type": "image", "id": "148395420004568888_6227738", "user": { "username": "jent99", "website": "", "bio": "Mostly nature pics.\ue32b\ue32b\ue32b Hope you like them.\ue056\ue32a \ue334gi\ue334 ", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "full_name": "jent99", "id": "6227738" } }, { /* Здесь идет больше фотографий... */ }] }

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

PHP будет кешировать результаты этого API запроса. Таким образом, мы будем получать последние картинки каждый час. Это сделает наше приложение более быстрым и ограничит количество обращений к API.

index.php

// Вы можете получить client ID из Instagram API страницы $instagramClientID = "-- вставьте свой client id ключ здесь --"; $api = "https://api.instagram.com/v1/media/popular?client_id=".$instagramClientID; $cache = "cache.txt"; if(file_exists($cache) && filemtime($cache) > time() - 60*60){ // Если файл кэша существует и он // свежее нежели 1 час, будем использовать его $images = unserialize(file_get_contents($cache)); } else{ // Создаем API запрос и генерируем файл кэша // Получаем 32 популярные фотографии на Instagram $response = file_get_contents($api); $images = array(); // Декодируем ответ и создаем массив foreach(json_decode($response)->data as $item){ $title = ""; if($item->caption){ $title = mb_substr($item->caption->text,0,70,"utf8"); } $src = $item->images->standard_resolution->url; $images = array("title" => htmlspecialchars($title), "src" => htmlspecialchars($src)); } // Удаляем последнюю картинку, но мы будем иметь // 32 картинки, когда добавим обложку array_pop($images); // Добавляем обложку в начале массива array_unshift($images,array("title"=>"Cover", "src"=>"assets/img/cover.jpg")); // Обновляем файл кэша file_put_contents($cache,serialize($images)); } // создаем разметку $totalPages = count($images); foreach($images as $i=>$image){ ?> " />