Скачать скрипт эффект перелистывания страниц. JQuery перелистывание - эффект перелистывания страниц на jquery
Сodrops — это самый лучший блог по веб дизайну. На нём всегда можно найти много самых креативных вещей для веб дизайнера. Огромным плюсом является то, что ещё и рассказывают как прикрепить или сделать тот или иной эффект. Он очень популярен за рубежом, но почему то не столь сильно в русском интернете. В общем очень полезный сайт для дизайнера, там можно получить кучу вдохновения и много чему научиться, так как там действительно продвинутые CSS уроки.
Сегодня я Вам хочу представить 15 классных уроков с этого чудо сайта. Всё «фишки» совершенно бесплатны и Вы их с лёгкостью сможете скачать. Ну а сейчас давайте подробнее.
Так же Вам будут интересно вот это:
Динамическая сетка с красивой анимациейЭто отличное решение для расположения Ваших блоков на сайте, так же эту сетку можно с лёгкостью использовать для изображений. Сделана эта сетка на чистом CSS.
Как сделать классные эффекты для картинок при наведении на CSSВ этом уроке рассказано как сделать супер эффекты при наведении на изображении. В примере есть целых 7 совершенно разных примеров, а так же инструкция, как сделать данное чудо на CSS.
Множество примеров CSS кнопок с замечательным эффектом при наведении, эти кнопки по желанию можно изменить под Ваш вкус.
Отличный урок, в котором рассказывается как сделать для сайта самое настоящее электронное пианино.
В этом уроке есть 9 примеров, которые имеют разные стили при наведении на иконки, смотрится всё очень стильно и современно. Например эти эффекты Вы можете свободно использовать для иконок социальных закладок на сайте.
Тут Вы узнаете как сделать с помощью CSS эффектное перелистывание для блока. Так же присутствует целых совершенно разных 5 примеров.
Здесь 4 примера, которые подробно показывают на что способна CSS анимация.
Например я такого ещё не видел, например, Вы хотите поесть в ресторане, соответственно Вы ищете желаемый ресторан в Гугле, вписываю в поле поиска желаемое место. А теперь посмотрите как это можно реализовать на много креативней и удобней.
Тут Вы узнаете как реализовать показ разных картинок, в зависимости от того на каком устройстве просматривают Ваш ресурс.
Отличный урок, в котором Вы узнаете как сделать красивое и адаптивное меню на CSS с поддержкой Ретина экранов.
Красивые эффекты, с помощью которых можно реализовать полноэкранное перелистывание страниц
Многие сайты используют подобные jQuery-плагины для предоставления каталогов продукции, продающих брошюр и так далее, и все это не просто так. jQuery-решения, позволяющие вам листать блоки контента, предлагают вам пользователям очень удобный способ ознакомиться с тем, что вы готовы предложить им. Если все сделать правильно, но такие электронные брошюры будут работать не хуже настоящих напечатанных, которые можно держать в руках. При помощи специальных плагинов, вы можете позволить посетителям вашего сайта без труда перелистывать страницы и чувствовать, будто они читают настоящую книгу.
Использование jQuery-плагинов с эффектом перелистывания позволит вам представлять содержимое вашего сайта в более привлекательной манере. Перед тем, как выбрать подходящее вам решение, вам следует получить некоторый технический навык. Некоторые плагины до сих пор основываются на Flash, и поэтому они не позволяет пользователям осуществлять поиск материала соответствующим образом и, к тому же, они не будут работать на iOS-устройствах. Это отрицательно сказывается на seo-оптимизации, а также приведет к тому, что пользователи просто не найдут интересующую их информацию. Плагины перелистывания на базе jQuery позволяют вам избежать всех этих проблем. Чтобы помочь вам найти подходящий скрипт, сегодня мы решили предложить вам подборку одних из лучших jQuery-плагинов для реализации эффекта перелистывания.
Эта подборка состоит из более, чем 20 jQuery-плагинов соответствующего предназначения, которые позволят вам реализовать механизм перелистывания страниц. У каждого представленного плагина есть свои уникальные свойства, поэтому мы предлагаем вам ознакомиться со всеми по очереди. После чего, хотелось бы, чтобы вы высказали свое мнение о выбранном вами плагине, чтобы помочь другим читателям избежать рутинных поисков. Заранее предупреждаем, что часть предоставленных решений являются платными.
Данный плагин создает галерею изображению в виде журнала. Вы можете перелистывать страницы книги, чтобы просматривать предыдущие или следующие изображения, просто перетягивая анимированные углы, отображаемые при наведении курсора на галерею.
Booklet представляет собой jQuery-инструмент для отображения контента на перелистываемых страницах. Он был разработан на базе библиотеки jQuery. Распространяется он под лицензионным соглашением MIT и GPL.
jPageFlip представляет собой jQuery-плагин для имитации процесса перелистывания страниц. Чтобы использовать jPageFlip, вам придется внедрить файл jQuery.js. jPageFlip хорошо поддается настройке. В последующие версии планируется добавить больше опций настроек. jPageFlip на данный момент базируется на основе «canvas», который поддерживается только в Firefox, Chrome, Opera и Safari (причем, в свежих версиях).
Flippy представляет собой jQuery-плагин для создания кросс-браузерного эффекта перелистывания страниц, который позволяет вам «перелистывать» любой HTML-элемент, какой только захочется.
Плагин imBookFlip умеет подгружать книгу в iframe, либо прямо на странице. Страницы книги можно переключить на ручное перелистывание, включить автоматическое перелистывание сразу после того, как страница будет загружена, либо установить функцию включения перелистывания после того, как будет произведен клик по обложке. Вы также без труда сможете добавить звук при помощи Sound Manager.
Flip – это jQuery-плагин, который без труда сможет перелистывать элементы на ваших страницах в 4-х направлениях.
FlipPage представляет собой jQuery-плагин, который создает имитацию перелистывания страниц будто в книге.
Изначально плагин был разработан для проведения презентаций, он также нашел свое место в таком устройстве как электронная книга. Этот плагин был разработан таким образом, чтобы использовать мощь графического аппаратного оснащения для воспроизведения плавных анимаций на HTML5/CSS3.
Слайдер способен менять изображения из портфолио, перелистывая их тогда, когда пользователь кликает по элементам управления. То есть, когда пользователь кликает по изображению, оно начинает вращаться на 360 градусов, и по окончании анимации пользователь видит новое изображение.
Turn.js – это javascript-библиотека, которая превратит ваш контент в почти настоящую книгу или журнал со всеми преимуществами HTML5. Интернет сильно преобразился с появлением интерфейсов, основанных на HTML5. turn.js идеально подойдет для публикации журналов, книг или каталогов на базе HTML5.
Этот плагин создает эффект перелистывания страницы поверх или внутри отображенных изображений, и это напоминает 2D-графику.
С каждым днем jQuery становится все более популярной ввиду удобства, гибкости и скорости. Такая анимация в стиле блокнота идеально подойдет для презентации информации на сайте.
BookBlock представляет собой jQuery-плагин, который можно использовать для создания компонентов в стиле буклетов, которые дадут вам возможность реализовать навигацию с перелистыванием страниц. Здесь можно использовать любой контент, будь то изображения или текст. Плагин трансформирует структуру только при необходимости (например, при перелистывании страницы), и использует наложения в виде теней для страниц, что придает ощущение реалистичности.
FlipBook способен собирать несколько изображений, а затем анимировать их. Каждое изображение отображается на короткий промежуток времени, а затем заменяется другим изображением по списку. Анимация начинается тогда, когда первое изображение полностью загружено, а изображения, которые еще не загрузились с сервера, просто пропускаются. Они включаются в анимацию только после того, как будут полностью загружены браузером.
Metro JS представляет собой javascript-плагин для jQuery, разработанный для того, чтобы у вас была возможность создавать интерфейсы в стиле Metro. Данный релиз сосредоточен вокруг Live Tiles, Application Bar и Theming. На данный момент он находится на ранней стадии разработки, но все функции должны работать на IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera и Safari(OSX/iOS).
Flash-Альбом с эффектом перелистывания страниц
Недавно нашел в интернете одну замечательную программу для создания фотоальбомов. Причем не просто фотоальбомов, а Flash-альбомов, в которых присутствует эффект перелистывания страниц! Такой альбом можно выложить на Youtube в формате swf и на свой сайт, как html-страницу, можно создать из него файл-exe и т. д... Да что говорить, смотрите что получилось у меня, за каких-то 20 минут!
Flip Album - программа, которая модифицирует обычные фотографии в отличные flash-альбомы + эффект перелистывания страниц! Теперь Вы можете создавать замечательные онлайн-фотоальбомы из коллекции своих фото и изображений.
1. Запустив программу нажимаем "Background" (фон), выбираем "Select from Background..." - если будем использовать встроенный фон программы.
Если есть свой фон, выбираем "Select from your computer". И вставляем свое фот
2. Нажимаем "Photo" и добавляем нужную нам фотографию. Ее можно растягивать, уменьшать и поворачивать
3. Нажав на "Mask" выбираем какой-нибудь из эффектов обрамления.
4. Кликнув "Text" можно добавить подпись к фото, поставив галочку "Shadow" добавляем тень к тексту
Получаем первую готовую страницу.
5. Таким-же образом добавляем столько страниц, сколько нам надо. Далее нажимаем на "Publish
6. Попадаем в новое окно, под надписью "Templates" выбираем шаблон, в настройках (Options) можно поменять качество фотографий и т. д. Далее нажимаем "Convert To Flipping Book
7. В окне конвертации выбираем формат выходного файла, например EXE. Выбираем папку сохранения, название файла и нажимаем "Convert"
Вот в принципе и все...
При переключении слайдов с переходным эффектом, который резонирует с темой презентации PowerPoint, зритель мгновенно может быть загипнотизирован образом переключает слайд. Это не только добавляет новизны и стиль презентации, но и предотвратить однообразие и скуку.
Эффекты перехода для добавления перелистывания страниц эффект в PowerPointЭффект страницу свою очередь является мощным методом создания анимированного контента, будь то анимация видео или презентацию. По умолчанию, PowerPoint предоставляет различные эффекты перехода, которые могут быть использованы, чтобы дать эффект поворота страницы для слайдов презентации, в том числе выключенным Пил, Page Curl и Драпируйте эффект.
Зачем использовать страницу Turn эффект?Очередь эффект страница может быть символическим для поворота на следующую страницу или раздел в теме. При представлении презентаций, связанных с тем, как история, образование и философии, вы можете использовать шелушиться, Page Curl и драп переходы, чтобы установить правильное настроение для вашей аудитории, так как если вы принимаете их в путешествие. Использование таких эффектов перехода может помочь вам представить свою презентацию, как история, которую ваша аудитория может найти интересный и освежающий, по сравнению с Выдержав пародию скучное горками.
Чтобы применить эффект поворота страницы для ваших презентаций вы можете использовать эффект шелушиться и Page Curl. Еще один хороший эффект Пелерина, что объясняется вперед в этом сообщении. Как и любой эффект, вы можете применить эти переходы в PowerPoint через вкладку Transition. Чтобы увидеть демонстрацию того, как применить этот эффект в PowerPoint, посмотреть видео приводится ниже.
Драпировочное Эффект перехода является еще одним хорошим переходом для применения эффект, подобный листать страницы. Этот переход появляется больше как листать страницы календаря или блокнота. Видео ниже показывает эффект драпировать в PowerPoint 2013.
Связанный: Смотрите также наш пост о том, как сделать страницу Curl Effect В PowerPoint 2010.
Существуют также и другие переходы, которые могут поместиться счет и может показаться достаточно уместно походить на странице листать. Вы можете дополнять такие переходы, используя бесплатный шаблон PowerPoint как Page Flip Шаблон PowerPoint или Curl страницы эффект Шаблон PowerPoint.
Компьютерные технологии глубоко проникли в нашу жизнь. Каждое действие, которое мы делаем с помощью компьютеров, сопровождается работой специальных приложений. Даже ярлыки, которые мы сохраняем на рабочем столе, обрабатывает специальная программа. Многие из нас уже сегодня, беря в руку ручку, ловят себя на мысли, что постепенно забывают, как писать.
Что-то подобное происходит и с книгами. Все меньше остается таких людей, которые читают бумажные книги. Гораздо проще читать электронные книги, которые значительно дешевле бумажных или же и вовсе доступны для бесплатного скачивания.
Если вы принадлежите к представителям старой школы и читаете бумажные книги, подписываетесь на газеты и просматриваете сайты любимых изданий в интернете, возможно, для вас привычней было бы, чтобы любимый проект был в удобной и более знакомой вам форме. PageFlip (перелистывание страниц) эффект - имитация книг. Ниже вам будут представлены некоторые уроки, плагины и примеры с использованием эффекта PageFlip. Итак, давайте разберемся с некоторыми плагинами.
ПлагиныjQuery плагины с эффектом перелистывания страниц подойдут для сайтов с большим количеством текста и изображений. Вместо однообразного и скучного отображения текстов, ссылок и изображений на страницах сайта, с эффектом перелистывания страниц вы сможете сделать презентацию проекта более интерактивной и анимированной.
1. FlippingBook
Этот плагин позволит вам встраивать публикации, созданные с помощью FlippingBook Publisher и FlippingBook Online, одним шагом без внесения изменений в код.
***
2. Easy Page Flip
Easy Flip Flip – это плагин, с которым вы сможете создать виртуальный журнал в несколько кликов.
3. Interactive 3D FlipBook
3D FlipBook – это программа просмотра PDF или WordPress плагин, который позволяет просматривать изображения, PDF-файлы или HTML-файлы в виде перелистывания.
***
4. A Page Flip Book
A Page Flip Book для WordPress – это самый простой способ управлять виртуальными 3D-книгами, которые вы можете просматривать с помощью мыши.
Вы также можете выбрать фоновое изображение или текстуру, если вам это нужно.
5. Photo Book Gallery
Photo Book Gallery позволяет создавать адаптивные флип-книги из изображений. Вы можете настроить свои книги с помощью набора параметров. Плагин прост в использовании и отлично работает на мобильных устройствах.
6. GoWorks Flip Clock
GoWorks Flip Clock отображает на ваших страницах и сообщениях элегантные ретро-флип-часы. Плагин идеально подходит для привлечения внимания к важной информации, имеет привлекательный визуальный эффект.
1. Fullscreen Pageflip Layout Using BookBlock Plugin
Учебник о том, как создать полноэкранный макет PageFlip с использованием BookBlock. Идея состоит в том, что доступ к контенту сайта в виде книги осуществляется через выдвигающуюся боковую панель меню.
2. CSS Page Flip
Учебник представляет чистый CSS и рамку 3D Page Flipping.
Преобразовать можно с помощью специального кода:
1 2 Page 1 3 Page 2 4 Page 3 5
В настоящий момент 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. Arcides
3. Pawelwojcik.com
4. P-e-e-l.com
5. 20 занятных фактов о браузерах и интернете
Ждем ваших откликов!
Во время демонстрации презентации может потребоваться выделить какой-либо элемент не только рамочками или размером. В PowerPoint имеется собственный редактор, позволяющий накладывать дополнительную анимацию на разные компоненты. Данный ход не только придает презентации интересный вид и уникальность, но и повышает ее функциональность.
Типы анимацииСразу стоит рассмотреть все имеющиеся категории эффектов, с которыми предстоит работать. Они разделяются по области использования и характеру осуществляемого действия. Суммарно все они делятся на 4 основные категории.
ВходГруппа действий, проигрывающая появление элемента одним из способов. Наиболее распространенные виды анимации в презентациях, служащие для улучшения старта каждого нового слайда. Обозначаются зеленым цветом.
Как можно догадаться, эта группа действий служит, наоборот, для исчезновения элемента с экрана. Чаще всего, используется совместно и последовательно с анимацией входа одинаковых компонентов для того, чтобы они убирались перед перемоткой слайда на следующий. Обозначаются красным цветом.
ВыделениеАнимация, которая так или иначе обозначает выбранный элемент, привлекая к нему внимание. Чаще всего это применяется к важным аспектам слайда, привлекая к нему внимание либо отвлекая от всего остального. Обозначаются желтым цветом.
Пути перемещенияДополнительные действия, служащие для изменения местоположения элементов слайда в пространстве. Как правило, данный способ анимирования используется крайне редко и для дополнительной визуализации особенно важных моментов в сочетании с другими эффектами.
Теперь уже можно приступать к рассмотрению процедуры установки анимации.
Создание анимацииВ различных версиях Microsoft Office способы создания подобных эффектов разные. В большинстве старых версий для настраивания элементов такого типа нужно выделить требуемый компонент слайда, нажать на него правой кнопкой мыши и выбрать пункт «Параметры анимации» или похожие значения.
В версии Microsoft Office 2016 используется несколько другой алгоритм. Всего есть два основных способа.
Способ 1: БыстрыйСамый простой вариант, который предназначен для назначения одного действия для конкретного объекта.
Этот способ производит быстрое добавление эффектов. Если пользователь нажмет на другой вариант, старое действие заменится выбранным.
Способ 2: ОсновнойТакже можно выбрать необходимый компонент, а затем нажать на кнопку «Добавить анимацию» в шапке в разделе «Анимация», далее следует выбрать требуемый тип эффекта.
Этот способ намного лучше за счет того, что позволяет накладывать разные анимационные скрипты друг на друга, создавая нечто более сложное. Также это не заменяет старые приложенные настройки действий элементов.
Дополнительные виды анимацииВ списке в шапке представлены только наиболее популярные варианты анимации. Полный перечень можно получить, если развернуть этот список и в самом низу выбрать вариант «Дополнительные эффекты…». Откроется окно с полным перечнем имеющихся вариантов эффектов.
Изменение скелетаАнимации трех основных типов – вход, выделение и выход – не имеют так называемого «скелета анимации», поскольку отображают просто эффект.
А вот «Пути перемещения» при накладывании на элементы изображают на слайде этот самый «скелет» - чертеж маршрута, который будут проходить элементы.
Для его изменения необходимо нажать левой кнопкой мыши на прочерченный маршрут перемещения и затем изменить его, перетаскивая в нужные стороны конец или начало.
Для этого потребуется хватать за круги в углах и серединах граней области выделения анимации, а затем растягивать в стороны. Также можно «ухватиться» за саму линию и вытягивать ее в любую нужную сторону.
Чтобы создать путь перемещения, для которого шаблон отсутствует, потребуется вариант «Пользовательский путь передвижения». Он обычно является самым последним в списке.
Это позволит самостоятельно начертить абсолютно любую траекторию движения любого элемента. Само собой, потребуется максимально точное и ровное рисование для изображения хорошего передвижения. После того, как маршрут будет нарисован, скелет получившейся анимации также можно изменять, как вздумается.
Настройки эффектовВо многих случаях просто добавить анимацию мало, нужно ее еще и настроить. Для этого служат все элементы, расположенные в шапке в этом разделе.
- Пункт «Анимация» добавляет эффект на выбранный элемент. Здесь представлен простой удобный список, при необходимости его можно расширить.
- Кнопка «Параметры эффектов» позволяет настраивать более конкретно данное выбранное действие. У каждого вида анимации имеются собственные настройки.
- Раздел «Время показа слайдов» позволяет произвести настройки эффектов по длительности. То есть, можно выбрать, когда начнет проигрываться конкретная анимация, сколько она будет длиться, с какой скоростью идти и так далее. Для каждого действия есть соответствующий пункт.
- Раздел «Расширенная анимация» дает возможность настроить более сложные виды действий.
Например, кнопка «Добавить анимацию» позволяет накладывать несколько эффектов на один элемент.
«Область анимации» позволит вызвать отдельное меню сбоку для просмотра очередности настроенных действий на одном элементе.
Пункт «Анимация по образцу» предназначен для распространения однотипных настроек спецэффектов на одинаковые элементы на разных слайдах.
Кнопка «Триггер» позволяет назначать более сложные условия для запуска действий. Особенно это полезно для элементов, на которые накладывалось несколько эффектов.
- Кнопка «Просмотр» позволяет посмотреть, как в итоге будет выглядеть слайд при просмотре.
Существуют определенные стандартные критерии на использование анимации в презентации на профессиональном или конкурсном уровне:
- Суммарно длительность проигрывания всех элементов анимации на слайде должна занимать не более 10 секунд времени. Есть два наиболее популярных формата – либо по 5 секунд на вход и выход, либо по 2 секунды на вход и на выход, и 6 на выделение важных моментов в процессе.
- Некоторые типы презентаций имеют свой тип разделения времени анимационных элементов, когда они могут занимать почти полную длительность показа каждого слайда. Но такая конструкция должна оправдывать себя тем или иным способом. Например, если на таком подходе держится вся суть визуализации слайда и информации на нем, а не просто использование для украшения.
- Подобные эффекты также нагружают систему. Это может быть неощутимо на небольших примерах, поскольку современные устройства могут похвастаться хорошей производительностью. Однако серьезные проекты с включением огромного пакета медиафайлов могут испытывать трудности при работе.
- При использовании путей передвижения стоит тщательно следить, чтобы мобильный элемент не выходил за границы экрана даже на долю секунды. Это демонстрирует непрофессионализм создателя презентации.
- Крайне не рекомендуется применять анимацию к видеофайлам и изображениям в формате GIF. Во-первых, нередки случаи искажения медиафайла после срабатывания триггера. Во-вторых, даже при качественной настройке может произойти сбой и файл начнет проигрываться еще в процессе действия. Грубо говоря, лучше не экспериментировать.
- Нельзя делать анимацию чрезмерно быстрой в целях экономии времени. Если существует строгий регламент, лучше вовсе отказаться от этой механики. Эффекты, в первую очередь, являются визуальным дополнением, поэтому они должны как минимум не раздражать человека. Чрезмерно быстрые и не плавные же движения не вызывают удовольствия от просмотра.
В конце хотелось бы заметить, что на заре существования PowerPoint анимация являлась дополнительным украшающим элементом. Сегодня без этих эффектов не обходится ни одна профессиональная презентация. Крайне важно практиковаться в создании эффектных и функциональных анимационных элементов, чтобы добиться от каждого слайда максимально качества.
Мы рады, что смогли помочь Вам в решении проблемы.
Задайте свой вопрос в комментариях, подробно расписав суть проблемы. Наши специалисты постараются ответить максимально быстро.
В последнее время на многих сайтах стал достаточно популярным эффект перелистывания. Поэтому достаточно актуальным было бы добиться этого эффекта с помощью jQuery и CSS3. Мы будем создавать блоки с картинками, которые в дальнейшем будут преобразованы в книгу. Также наш слайдер будет иметь кнопки, с помощью которых пользователь сможет видеть, на какой странице он сейчас находится. Страницы слайдера будут представлены в виде изображений в HTML, но каждое из них будет разделено на две страницы с помощью jQuery.
Мы собираемся писать этот код как плагин JQuery, поэтому сначала нам нужно включить jQuery . Далее подключаем библиотеку Modernizr. Нам нужны только 3d-преобразования, и вы можете скачать необходимый скрипт отсюда . Это будет гарантировать, что все будет прекрасно работать в браузерах, которые не поддерживают 3D преобразования. Дальше нужно создать файл с именем jquery.pictureflip.js, который будет размещен в том же месте, где и код нашего плагина. HTML должен выглядеть следующим образом:
Body
HTML-разметка довольно проста. Все что нужно сделать, поместить группу дивов, которые будут представлять наши изображения в HTML. А затем Создать еще один блок с определенным ID? например, #flipbook .
Flowers: What you didn"t know Flowers: Real or Fiction? A Flower ate my Baby! Will Flowers Destroy Earth?
Давайте теперь перейдем к стилям.
CSSВместе с некоторыми стандартными стилями CSS, мы будем использовать 3D-преобразования для выполнения эффекта листания страниц. В JQuery мы разделим блок с изображениями на два отдельных дивы, а затем повернем один таким образом, чтобы казалось, что мы переворачиваем страницу. Для начала, давайте добавим некоторые основные стили.
#container { padding : 10px ; box-shadow: 0px 0px 10px rgba(0 ,0 ,0 ,0 .1 ) ; margin : 20px auto ; width : 600px ; height : 330px ; } /* 600x300px in size */ .flipbook { position : relative ; width : 600px ; height : 300px ; z-index : 999 ; } .flipbook > div { width : inherit ; height : inherit ; position : absolute ; top : 0px ; left : 0px ; text-align : left ; } .flipbook .hide { display : none ; } .flipbook > div > div { width : inherit ; height : inherit ; background-size : 600px 300px ; width : 50 % ; height : 100 % ; position : absolute ; } /* разделяем блок с картинкой на два отдельных. */ /* Второй должен быть справа, а первый слева */ .flipbook div[ class$="-fend" ] { background-position : 100 % 0 ; left : 50 % ; }
В разделе JQuery мы будем подвигать две части изображений в следующий див, который будет иметь название moving-div . Мы разместим их так, чтобы в целом они давали цельное изображение, а затем вращать. Чтобы это правильно осуществить, применяем к moving-div 3D- трансформацию.
/* Preserve 3D */
Flipbook .moving-div { z-index : 99999 ; width : 50 % ; -webkit-perspective: 1000 ; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 0 0 ; -moz-perspective: 1000 ; -moz-transform-style: preserve-3d; -moz-transform-origin: 0 0 ; -o-perspective: 1000 ; -o-transform-style: preserve-3d; -o-transform-origin: 0 0 ; -ms-perspective: 1000 ; -ms-transform-style: preserve-3d; -ms-transform-origin: 0 0 ; perspective: 1000 ; transform-style: preserve-3d; transform-origin: 0 0 ; } /* Make the backfaces invisible */ .flipbook .moving-div div { -webkit-backface-visibility : hidden ; -moz-backface-visibility : hidden ; -o-backface-visibility : hidden ; -ms-backface-visibility : hidden ; backface-visibility : hidden ; width : 100 % ; z-index : 9999 ; } /* Ensure the divs are in the correct position */ .flipbook .moving-div > div[ class$="-fend" ] { left : 0 ; } /* Rotate the last card so its facing back to back with the first one */ .flipbook .moving-div > div[ class$="-fstart" ] { -webkit-transform: rotateY(180deg) ; -moz-transform: rotateY(180deg) ; -o-transform: rotateY(180deg) ; -ms-transform: rotateY(180deg) ; transform: rotateY(180deg) ; }
Внутри moving-div будут размещены два span, которые будут создавать эффект тени. Они будут анимированы в части jQuery.
/* The two spans are shadows for depth */ .flipbook .moving-div span { box-shadow: inset 60px 0 60px -60px rgba(0 ,0 ,0 ,0 .1 ) ; width : 100 % ; height : 100 % ; position : absolute ; opacity: 0 ; display : block ; z-index : 999999 ; top : 0 ; background : rgba(0 ,0 ,0 ,0 .1 ) ; -webkit-backface-visibility : hidden ; -moz-backface-visibility : hidden ; -o-backface-visibility : hidden ; -ms-backface-visibility : hidden ; backface-visibility : hidden ; left : 0 ; } .flipbook .moving-div span:last-of-type { -webkit-transform: rotateY(180deg) ; -moz-transform: rotateY(180deg) ; -o-transform: rotateY(180deg) ; -ms-transform: rotateY(180deg) ; transform: rotateY(180deg) ; box-shadow: inset -60px 0 60px -60px rgba(0 ,0 ,0 ,0 .1 ) ; }
Есть также несколько других классов, которые будут добавлены в классы, чтобы создавать вращение moving-div . Для них используем простые 3D-трансформации
Flipbook .rotateYForward { -webkit-transform: rotateY(180deg) ; -webkit-transition: -webkit-transform 1s ease-in; -moz-transform: rotateY(180deg) ; -moz-transition: -moz-transform 1s ease-in; -o-transform: rotateY(180deg) ; -o-transition: -o-transform 1s ease-in; -ms-transform: rotateY(180deg) ; -ms-transition: -o-transform 1s ease-in; transform: rotateY(180deg) ; transition: transform 1s ease-in; left : 50 % ; } .flipbook .beginMove { left : 50 % ; -webkit-transform: rotateY(180deg) ; -moz-transform: rotateY(180deg) ; -o-transform: rotateY(180deg) ; transform: rotateY(180deg) ; } .flipbook .rotateYBackward { -webkit-transform: rotateY(360deg) ; -webkit-transition: -webkit-transform 1s ease-in; -moz-transform: rotateY(360deg) ; -moz-transition: -moz-transform 1s ease-in; -o-transform: rotateY(360deg) ; -o-transition: -o-transform 1s ease-in; -ms-transform: rotateY(360deg) ; -ms-transition: -o-transform 1s ease-in; transform: rotateY(360deg) ; transition: transform 1s ease-in; }
Следующий этап достаточно легкий. Просто добавляем стили для передней и задней стрелы и маленьких кругов, которые будут сообщать пользователю, какие страницы открыты.
Flipbook .back-arrow , .flipbook .forward-arrow {
Width : 100px ; height : 100px ; box-sizing: border-box; -moz-box-sizing: border-box; padding : 8px 28px ; font-size : 7em ; font-weight : bold ; z-index : 10 ; left : -140px ; color : #fff ; top : 30 % ; border-radius: 100px ; position : absolute ; cursor : pointer ; z-index : 999999 ; background-color : #396275 ; } .flipbook div[ class$="-arrow" ] :hover { box-shadow: inset 0px 0px 30px rgba(0 ,0 ,0 ,0 .2 ) ; } .flipbook div[ class$="-arrow" ] :active { background-color : #2e505f ; box-shadow: inset 0px 0px 30px rgba(0 ,0 ,0 ,0 .1 ) ; } .flipbook .forward-arrow { right : -140px ; left : auto ; padding : 8px 34px ; font-weight : bold ; } .flipbook .buttons { width : 98 % ; padding : 7px 1 % ; height : 16px ; background : #fff ; position : relative ; top : 300px ; } .flipbook .buttons span { background : #fff ; box-shadow: inset 0 0 8px rgba(0 ,0 ,0 ,0 .1 ) ; width : 16px ; cursor : pointer ; height : 16px ; border-radius: 16px ; display : block ; float : right ; position : relative ; margin-right : 5px ; } .flipbook .buttons .selected { background-color : #47b1e2 ; box-shadow: inset 0 0 10px rgba(0 ,0 ,0 ,0 .1 ) ; } .flipbook .content { display : none ; height : 30px ; padding : 7px ; z-index : 99999999 ; position : absolute ; bottom : 0 ; width : 50 % ; font-size : 2em ; } .flipbook a { color : #fff ; font-weight : bold ; text-decoration : none ; border-bottom : 2px solid #fff ; text-shadow : 0 0 10px rgba(0 ,0 ,0 ,0 .1 ) ; }
И, наконец, мы собираемся добавить изображения, которые мы будем использовать. Вы можете добавить больше, если пожелаете. В примере их будет 4. Они будут относиться к дивам image, которые мы определили ранее в HTML.
/* THE IMAGES YOU WANT TO USE */
/* == add more if you want == */ /* == update the HTML too! == */ div[ class^="image-1-" ] { background : url ("images/1.jpg" ) ; } div[ class^="image-2-" ] { background : url ("images/2.jpg" ) ; } div[ class^="image-3-" ] { background : url ("images/3.jpg" ) ; } div[ class^="image-4-" ] { background : url ("images/4.jpg" ) ; }
Переходим к JQuery!
jQueryОткройте ваш файл jquery.pictureflip.js файл. Основная структура JQuery плагина должна иметь следующий вид:
(function ($) { $.fn .extend ({ // The name of your plugin pictureflip: function (options) { // Some default values. The user will be able to alter these var defaults = { time: 1000 , start: 1 } // Connect the default values with the function variables var options = $.extend (defaults, options) ; // This bit is important, it ensures the chainability of jQuery // We have to return each object this plugin applies to, so that // the user can still add more jQuery functions on the end, i.e. // $("#item").pictureflip().appendClass("pictures"); return this .each (function () { var o = options; var obj = $(this ) ; // This is where our plugin code goes! It"s just regular jQuery // from here on out! } ) ; } } ) ; } ) (jQuery) ;
Создание плагинаЧтобы приступить к определенным действиям, нам нужно объявить некоторые основные переменные, такие как количество изображений и проверку на анимацию изображений.
// Некоторые переменные для начала работы
Var time = o.time ; var imageNumber = $("div" , obj) .length ; var animated = 0 ;
Следующим шагом является добавление пользовательского интерфейса. Мы собираемся сделать это с помощью JQuery, чтобы сделать его как можно проще для пользователя.
// Append UI obj.append ("" ) ; obj.addClass ("flipbook" ) ; // Добавление кнопки в зависимости от выбранной фотографии while (imageNumber > 0 ) { $("" ) .appendTo ($(".buttons" ) ) ; --imageNumber; } // Fade в содержании текста $(, obj) .fadeIn () ; // Эту функцию добавим позже selectCircle() ;
Затем мы должны определить несколько простых функций. Эти функции анимации, z-index, перезапуск слайдов и выбор правильного круга.
// Изменение z- индекса function zIndexFix() { $("" ) .each (function (index) { zindex = index * -1 ; $(this ) .css ("zIndex" , zindex) ; } ) ; } // Restarts the slides to the regular position so they"re ready to flip // again! function restartSlides() { var $moveFirst = $(".moving-div div:first" ) .attr ("class" ) .split ("-" ) [ 1 ] ; var $moveLast = $(".moving-div div:last" ) .attr ("class" ) .split ("-" ) [ 1 ] ; $("> .moving-div div:first" , obj) .appendTo ($("> #image-" +$moveFirst, obj) ) ; $("> .moving-div div:last" , obj) .appendTo ($("> #image-" +$moveLast, obj) ) ; $(".moving-div" ) .removeClass ("rotateYForward rotateYBackward beginMove" ) .removeAttr ("style" ) ; $(".moving-div" ) .addClass ("hide" ) ; } // Анимация тени function shadowAnimate(time) { $(".moving-div span" ) .animate ({ opacity: 1 } , time/2 ) ; setTimeout(function () { $(".moving-div span" ) .animate ({ opacity: 0 } , time/2 ) ; } , time/2 ) ; } // Выбор соответствующего круга на основе выбранных изображений. function selectCircle() { var imageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) ; $(".buttons span" ) .removeClass ("selected" ) ; $(".buttons .button-" +imageID) .addClass ("selected" ) ; }
Давайте теперь перейдем к функции анимации. Была добавлена переменная, которая будет проверять, есть ли кнопка вперед или назад. Если вы заметили, то с помощью переменной prev будет идти проверка, какая кнопка нажата. На данный момент, это не работает в Safari, поэтому был отключен эффект листания в Safari .
// Функция анимации
Function animation(prev, time, buttons) { // Исчезание текста $("div:first .content" , obj) .fadeOut (50 ) ; // Если анимация не работает, то мы можем начать if (animated == 0 ) { // Анимация работает animated = 1 ; // Следующий слайд if (prev != true ) { var $nextSlide = $("div:first ~ div:first" , obj) .attr ("id" ) ; } else { var $nextSlide = $("div:last" , obj) .attr ("id" ) ; } // Текущий слайд var $thisSlide = $("div:first" , obj) .attr ("id" ) ; // If 3D Transforms are not supported then we just default back to // fade in slides. These will not have the 3D effect but it will // still be usable. if (Modernizr.csstransforms3d == "" || (navigator.userAgent .indexOf ("Safari" ) != -1 && navigator.userAgent .indexOf ("Chrome" ) == -1 ) ) { $("> #" +$nextSlide, obj) .prependTo (obj) ; if (prev != true ) { $("> #" +$thisSlide, obj) .appendTo (obj) ; } animated = 0 ; zIndexFix() ; selectCircle() ; return false ; } // Если нажата кнопка вперед if (prev != true ) { // Добавление дивов к moving div $("> #" +$nextSlide+" > div, > #" +$thisSlide+" > div" , obj) .appendTo ($(".moving-div" ) ) ; // Rotate the moving div holder and change the time // based on what is set via Javascript $(".moving-div" , obj) .addClass ("rotateYForward" ) .css ({ : time/1000 +"s" , "-moz-transition-duration" : time/1000 +"s" , "-ms-transition-duration" : time/1000 +"s" , "-o-transition-duration" : time/1000 +"s" , "transition-duration" : time/1000 +"s" } ) ; // Вращение дивов таким образом, чтобы было видно следующий // А предыдущий див находился под ним $("> #" +$nextSlide, obj) .prependTo (obj) ; $("> #" +$thisSlide, obj) .appendTo (obj) ; } else { // Else this is the back button // So put the divs in the correct order so we can create // the illusion of flipping $("> #" +$thisSlide, obj) .prependTo ($(obj) ) ; $("> #" +$nextSlide, obj) .insertAfter ($("div:first" , obj) ) ; // Then append the correct divs to the moving div $("> #" +$nextSlide+" > div, > #" +$thisSlide+" > div" , obj) .appendTo ($(".moving-div" ) ) ; // Fix the z-index real quick since we"ve been moving stuff around zIndexFix() ; // Rotate the moving div holder $(".moving-div" ) .addClass ("beginMove" ) ; // A very small timeout so that this function does not interfere with // other functions setTimeout(function () { // Вращение! $(".moving-div" ) .addClass ("rotateYBackward" ) .css ({ "-webkit-transition-duration" : time/1000 +"s" , "-moz-transition-duration" : time/1000 +"s" , "-ms-transition-duration" : time/1000 +"s" , "-o-transition-duration" : time/1000 +"s" , "transition-duration" : time/1000 +"s" } ) ; } , time/50 ) ; } // Анимация тени! shadowAnimate(time) ; // Another timeout, to be run at the end of the animation setTimeout(function () { // Put the slides back to their default classes and values restartSlides() ; if (buttons != true ) { $(".moving-div" ) .addClass ("hide" ) ; } // Prepend accordingly if (prev == true ) { $(" > #" +$nextSlide, obj) .prependTo ($(obj) ) ; } // Fix up the z-index and change the circle zIndexFix() ; selectCircle() ; // The animation is now over animated = 0 ; // Fade in the content! $("div:first .content" , obj) .fadeIn () ; } , time) ; } }
Теперь все, что нам нужно сделать — вызвать определенную реакцию на нажатие кнопки.
$(".forward-arrow" ) .click (function () { $(".moving-div" ) .removeClass ("hide" ) ; setTimeout(function () { animation(false , time) ; } , 1 ) ; } ) ; $(".back-arrow" ) .click (function () { $(".moving-div" ) .removeClass ("hide" ) ; setTimeout(function () { animation(true , time) ; } , 1 ) ; } ) ;
Следующим шагом будет появления маленького круга в нижней части. Это сделать не так сложно, как может показаться. Мы хотим, чтобы положение кнопки соответствовало номеру изображения. Для этого мы используем setInterval.
$(".buttons span" , obj) .click (function () { // Remove the hide class from the moving div $(".moving-div" ) .removeClass ("hide" ) ; // Get the button ID var buttonID = parseFloat($(this ) .attr ("class" ) .split ("-" ) [ 1 ] ) ; // Get the current iamge ID var currentImageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) ; // Calculate a faster time var reduxTime = time/10 ; // And set an interval in a variable using the rotateImages function var interval = setInterval(rotateImages, reduxTime) ; function rotateImages() { // Update the current image everytime the interval is run currentImageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) ; // If the button number is equal to the current image number if (buttonID == currentImageID) { // The animation is over, clear in the interval clearInterval(interval) ; // Hide moving-div $(".moving-div" ) .addClass ("hide" ) ; // Cancel the function! return false ; } else { // Otherwise keep running the animation animation(false , reduxTime, true ) ; } } } ) ;
И наконец просто нужно проверить z-index, и установить первое изображение, если пользователь определит его.
// Make sure to fix the z-index too! zIndexFix() ; // Oh, and change the start image if the user defines it. $(".buttons .button-" +o.start , obj) .click () ;
Теперь, когда мы закончили, можно запустить наш плагин.
ПодключениеЧтобы запустить плагин, просто добавьте это в head вашего документа:
$(document) .ready (function () { $("#flipbook" ) .pictureflip ({ time: 1000 , start: 1 } ) ; } ) ;
Перевод — Дежурка
