Как сделать переворот страницы изображения JavaScript HTML 5 Canvas, как вы обычно видите во Flash?

Кто-нибудь пробовал воссоздать эффект перелистывания страницы с изображениями, которые вы обычно видите в Adobe Flash, с помощью JavaScript и тега холста HTML 5?

Существуют ли какие-либо фреймворки или подключаемые модули JQuery, которые обеспечивают такой эффект?

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

Я действительно хочу узнать, как это сделать с помощью тега холста JavaScript и HTML 5, но не уверен, с чего начать и какие формулы потребуются.

Пример перелистывания страницы во Flash


javascript canvas html
person Zachary Scott    schedule 02.12.2009    source источник

Ответы (9)


arrow_upward
16
arrow_downward

Вы можете взглянуть на другую (хорошую) реализацию перелистывания страниц на основе HTML5: http://jpageflipper.codeplex.com/

Это действительно приятно и реализовано в виде плагина jQuery.

person Ivan Suhinin    schedule 18.05.2010
comment
Ожидаемый эффект флипа намного лучше, чем в демо jFlip, потому что он показывает изображение на обратной стороне страницы. - person Zachary Scott; 19.05.2010
comment
Привет, я написал почти то же самое, но с WebGL - это очень гладко :) flipr.ivank.net - person Ivan Kuckir; 24.07.2012

arrow_upward
8
arrow_downward

Вы можете попробовать jFlip, это плагин jQuery, он не совместим с IE, но Я думаю, это не проблема для вас, так как вы просите HTML5.

person Soufiane Hassou    schedule 02.12.2009
comment
По иронии судьбы, из всех ссылок на этой странице jFlip была единственной, которая у меня работала в IE6. - person thdoan; 19.12.2011
comment
@10basetom Иронично, как некоторые могли бы даже сказать - person rickyduck; 20.04.2012

arrow_upward
8
arrow_downward

Это плагин jquery и довольно изящный

http://www.turnjs.com/#home

person iamalismith    schedule 01.03.2012
comment
очень хорошее дополнение, мне больше всего понравилось - person rickyduck; 20.04.2012

arrow_upward
4
arrow_downward

см. это http://www.20thingsilearned.com/home

person Narendrakumar    schedule 14.02.2011

arrow_upward
4
arrow_downward

Вот приложение для перелистывания страниц HTML5, которое я создал с использованием HTML5 Canvas Element и jQuery. Он называется RectoVerso.

Я также наткнулся на это: http://romancortes.com/ficheros/page-flip.html
Что делается только с помощью CSS3.

person Brad    schedule 08.11.2010

arrow_upward
4
arrow_downward

Существует четкий и информативный пример создания собственного эффекта перелистывания страницы. на основе книги 20 вещей, которые я узнал о браузерах и Интернете, на которую ссылается Нарендракумар. к. Это отличная реализация для подражания, тематическое исследование ясное с соответствующими примерами кода, и оно было написано старшим интерактивным разработчиком для Fi, компании, которая разработала книгу.

person Andrew Patton    schedule 15.02.2012

arrow_upward
3
arrow_downward

http://js1k.com/2010-first/demo/441
Как можно компактнее :D

person mieszkoz    schedule 15.12.2010

arrow_upward
2
arrow_downward

http://www.romancortes.com/blog/pure-css3-page-flip-effect/

person Noelchan    schedule 30.11.2010

arrow_upward
1
arrow_downward

Это лучше сделать с помощью элемента SVG <foreignObject> и преобразований SVG. В этой записи блога Марка Финкла содержится некоторая информация о ротации вещи, которые вам нужно было бы сделать в эффекте «переворота страницы». Насколько мне известно, это поддерживают только Gecko 1.9+ и WebKit.

person Eli Grey    schedule 02.12.2009