Как сделать перелистывание страниц. Эффект перелистывания страниц в фотошопе

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

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

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"

Вот в принципе и все...

Привет всем! Я тут частенько бываю на одном блоге, и как-то раз зашла там речь о специальной программе для создания учебников, подчеркиваю именно учебников. И при некоторой сноровке, ее можно использовать и для создания простых электронных книг. Так вот, слово за слово и возникло некое пари, ну пари не пари, а спор.

Я утверждал, да и утверждаю до сих пор, что создать электронную книгу возможно с помощью стандартной программы Word из пакета Microsoft Office. Да не просто книгу, а с содержанием, постраничной навигацией, ну разными другими штуками, вплоть до перелистывания страниц, а так же вставки звука и видео.

Справедливости ради, надо сказать, что все это можно сделать в Word, ну кроме перелистывания. Перелистывание – это уже другие технологии, которые требуют других программ. Так что каюсь, был не прав… И вот при некоторой сноровке получается вполне себе такая, красивая электронная книга с перелистыванием.

Примеры работ

Посмотрите, что получилось
Смотреть книгу в PDF

Скачать и смотреть книгу с перелистыванием

Ну как? Скачали-посмотрели? Какие впечатления? Если не получилось скачать, ну мало ли, антивирус ругается, например, то предлагаю посмотреть еще несколько вариантов данной книги:

Статья в виде флеш-книги в html с использованием iframe

Та же статья с использованием специального сервиса

Онлайн-сервис по созданию флеш-книг и флеш-журналов. Кому интересно, обзор этого сервиса можно почитать

Заказные книги:

Меню кафе «Равенна» — Итальянска кухня

Меню кафе «Равенна» — Русская кухня

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

Вот и готова книга с красивой титульной страницей и удобным оглавлением. Осталось только сделать из него PDF-файл.

Шаг второй. Создаем PDF-файл

Ну, тут все просто, я, к слову, уже писал от том, как создать PDF-файл с помощью средств Word 2007, о чем можно прочитать вот . Но для последней версии Word все еще проще. Заходим во вкладку Файл и выбираем пункт Экспорт

Нажимаем на кнопку Создать PDF и в открывшемся окне вводим название файла

А вот здесь важно поставить галочку в пункте Создать закладки используя Заголовки

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

Шаг третий. Завершающий, создаем флеш-книгу

Так как до сего момента мне не было нужно, то я особо и не заморачивался тем, какими программами возможно создать такие книжки. Но с помощью дяди Гоши и некой толики терпения и упорства я нашел две программы позволяющие превращать PDF-файлы во флеш-книги.

Программа первая. FlipBook Maker.

На этом продукте надолго останавливаться не буду, так как мне результат конвертации не понравился абсолютно. Ссылки в книге не работают, да и как-то все кривоватенько. Ну, в общем не знаю, мне не понравилось. Может вам удастся что-то сделать в этой программе, тогда обязательно напишите мне комментариях. Хотя и эта программа может похвастаться некоторым интересным функционалом. Например, в ней большой выбор готовых шаблонов…

Посмотреть и скачать пробную версию можно на официальном сайте программы.

А вот следующая программулина, как раз то, что нужно.

Программа следующая. Flip PDF

Отличная программа, легко работает с PDF-файлами, позволяет вставлять или редактировать: ссылки, изображения, видео, звук и многое другое…

Скачать пробную версию можете .

Оговорюсь сразу, программа не бесплатная, да и при создании книги она прислюнивает свои водяные знаки. Но если вам требуется эта программа на один раз или просто очень нужна — напишите мне, помогу.

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

Загрузка PDF-книги

Запускаем программу и видим вот такое окно

Нажимаем на кнопку Import PDF и указываем путь к нашей PDF-книге

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

Кроме указания пути к файлу, все остальные параметры можно оставить как есть. Нажимаю Import Now , то бишь Импортировать сейчас , и видим, как программа раскладывает файлик на странички.

Появляется окно с будущей книгой.

Выбор и настройка шаблона

Заметили, что на предыдущих скриншотах шаблон книги был один, а на последнем скриншоте уже другой шаблончик. Это делается с помощью меню Templates

При нажатии на стрелку, появиться вот такое окно,

в котором можно выбрать понравившийся шаблон.

В левой колонке указаны наборы шаблонов. Шаблоны различаются не только по цвету и фоновой картинке, но и по функционалу.

Над шаблоном можно произвести тонкую настройку: добавить или убрать кнопки в панели управления, поменять цвет фона, изменить цвет ссылок, настроить расположение самой книги относительно границ окна и много чего еще (включайте метод тыка, обязательно пригодиться ).

Все описывать не буду, но хочу обратить ваше драгоценное внимание на несколько моментов:

Первый момент. Если вы вносите какие-либо изменения в шаблон, то для чтобы увидеть что получилось, нажмите на кнопку Apply Change. Она у вас будет моргать красным цветом при изменении какого-либо параметра.

Второй момент. В настройках шаблона есть возможность указать ID Google Analytics. Если я не прав, то поправьте меня. При указании ID у меня появляется возможность защитить свое творение от воровства. Дядя Гугл присвоит данной книге авторство именно моего сайта, так как мой блог зарегистрирован в Google Analytics. Так это или я не прав?

Третий момент. Обратите внимание на замечательную кнопку Edit Pages. С помощью этой кнопки вы сможете вставить дополнительные материалы в книгу.

Можно добавить звук, видео с Ютуба, просто видео в формате.flv, а еще добавить ссылки, кнопки и слайд-шоу, не говоря уже о картинках. В общем очень полезная штука.

Создание книги

И вот теперь, все что можно было настроили, шаблон выбрали, осталось только последнее действо: создать саму книгу. Книга может быть создана в нескольких форматах:

Формат HTML (для вставки в блог)
Формат ZIP (тот же html, но запакованный в архив)
Формат EXE (самозапускающийся файл, который вы могли скачать в начале статьи)
Формат APP (специальный формат для компьютеров Apple)

Так что все просто: выбираете нужный формат, путь к папке, где будет храниться книга и нажимаете кнопку Convert.

Вот и все необходимые манипуляции для создания интерактивной книги. Сделал книгу во-второй раз с другим шаблоном и в формате HTML, а еще добавил на некоторые странички звуковые файлы и кнопки.

Выводы

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

1. Все программы, которые использовались для создания флеш-книг платные. Кроме Adobe Reader, это бесплатная читалка. Но Word и Flip PDF платные, хотя Flip PDF оправдывает стоимость в сто зеленых американских рублей полностью, да и Word, в принципе свои деньги отбивает. За хорошую программу денег не жалко. Кстати, а вы покупаете программы или ломанными пользуетесь?

2. Пока возился с Flip PDF обнаружил некоторые косяки и неудобства

видео с Ютуба вставляется криво, в программе работает, а вот в готовой книге нет
при вставке звуковых и видеофайлов эти файлы копируются в папку с книгой, что значительно увеличивает объем самой книги

Больше корявостей не нашел, если найдете, напишите в комментариях. Как всегда писал дольше, чем занимает весь процесс. Ну, как вам процесс и результат? Всем удачи!

В последнее время на многих сайтах стал достаточно популярным эффект перелистывания. Поэтому достаточно актуальным было бы добиться этого эффекта с помощью 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 плагина должна иметь следующий вид:

Создание плагина

Чтобы приступить к определенным действиям, нам нужно объявить некоторые основные переменные, такие как количество изображений и проверку на анимацию изображений.

// Некоторые переменные для начала работы

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 вашего документа:

Перевод — Дежурка

Сodrops — это самый лучший блог по веб дизайну. На нём всегда можно найти много самых креативных вещей для веб дизайнера. Огромным плюсом является то, что ещё и рассказывают как прикрепить или сделать тот или иной эффект. Он очень популярен за рубежом, но почему то не столь сильно в русском интернете. В общем очень полезный сайт для дизайнера, там можно получить кучу вдохновения и много чему научиться, так как там действительно продвинутые CSS уроки.

Сегодня я Вам хочу представить 15 классных уроков с этого чудо сайта. Всё «фишки» совершенно бесплатны и Вы их с лёгкостью сможете скачать. Ну а сейчас давайте подробнее.

Так же Вам будут интересно вот это:

Динамическая сетка с красивой анимацией

Это отличное решение для расположения Ваших блоков на сайте, так же эту сетку можно с лёгкостью использовать для изображений. Сделана эта сетка на чистом CSS.

Как сделать классные эффекты для картинок при наведении на CSS

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

Отличные кнопки с красивым эффектом на CSS

Множество примеров CSS кнопок с замечательным эффектом при наведении, эти кнопки по желанию можно изменить под Ваш вкус.

Как сделать пианино

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

Красивый эффект при наведении для иконок

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

Эффектное перелистывание для блока

Тут Вы узнаете как сделать с помощью CSS эффектное перелистывание для блока. Так же присутствует целых совершенно разных 5 примеров.

Крутые примеры использования CSS анимации

Здесь 4 примера, которые подробно показывают на что способна CSS анимация.

Необычная форма поиска

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