Эффект переворачивания страницы для HTML5?

Question

Привет, возможно ли иметь эффект перелистывания страницы, как книга для HTML5? Если так, как это делается?

Заранее спасибо!

Answer 1

Вот еще одна анимация с переворотом страницы, выполненная с помощью CSS Animations ОБНОВЛЕНИЕ: НАРУШЕННАЯ ССЫЛКА. Методология основана на вдохновленном оригинале Римского Кортеса .

Способ, которым это построено, состоит в том, что каждая правая страница имеет двойное вложение в двух div. Внутренний блок поворачивается на 30 градусов вокруг точки вращения над страницей внутри внешнего блока, так что страница отображается. Внешний div также вращается вокруг этой же точки вращения примерно на 15 градусов. Он настроен с переполнением: скрытый и действует как контейнер отсечения для внутренней страницы div. z-индексация используется для укладки страниц друг на друга.

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

Код немного сложен, но исходный код довольно прост

Answer 2

Вы можете использовать плагин jQuery для эффекта переворота страницы.

Ниже приведена ссылка на плагин jQuery.

http://plugins.jquery.com/plugin-tags/page-flip

Демонстрацию можно найти наhttp://builtbywill.com/code/booklet/

Надеюсь, это поможет.

Answer 3

Вы можете использовать CSS Transformations для этого.

Дополнительная информация: http://www.the -art-of-web.com / css / css-animation /

Или здесь (доступно только в настоящее время в браузерах Webkit) http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Answer 4

turn.js - это плагин для jQuery, который создает очень реалистичный эффект переворачивания страницы с использованием HTML5, это прекрасный эффект, и плагин был написан таким образом, что его реализация и настройка просты и нетребователен.