Эффект реалистичного перелистывания страниц на JS

[Nodlik]

Спасибо) Будут вопросы по подключению / настройке — пишите!

[skorpix]

По доработке. Добавьте плотность страниц.
Т.е. это мягкая книга. А есть книги, у которых плотные пластиковые страницы.
Эту либу можно использовать в фотомагазинах, которые печатают фотокниги и у них могут быть мягкие страницы, а могут твердые.

[Nodlik]

Да, спасибо, это как раз было в планах

[drWhy]

Тогда можно и плюшевые страницы сделать — в детских книжках пригодится — бывают книжки для купания. Тогда уж и с формой-прозрачностью заморочиться.

[MikeLP]

Выглядит действительно неплохо, но есть небольшой момент в конце анимации перелистывания, который выглядит чуток неестественно — такое ощущение что страница просто линейно доходит/доезжает до конца, в жизни это было бы скорее похоже на эффект ускорения и постепенного торможения (что-то наподобие ease-in-out из css). Но возможно это лишь кажется.

[Nodlik]

Анимация действительно линейная, можно действительно попробовать реализовать что нибудь подобное ease-in-out, попробую

[Daddy_Cool]

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

[leschenko]

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

Как результат: заголовок хороший, а реализация — нет. Это не плохая реализация, но это не "реалистично".

[Nodlik]

Да это все таки двухмерное решение. В той же ibooks, сделано в 3d и выглядит очень круто

[leschenko]

Тогда не надо писать, что оно реалистичное. Да, хорошая реализация перелистывания, но не реалистичная.

[xxicb]

А в чем принципиальное отличие от этого проекта — github.com/blasten/turn.js?

[Nodlik]

В общем-то, принципиального отличия конечно нет, оба по факту выполняют один и тот же функционал. Но отличия в деталях и реализации:
— turn.js требует jQuery и реализован как плагин к ней. PageFlip же — не требует никаких зависимостей и оформлен в виде ES6 модуля
— PageFlip может автоматически подстраиваться под размер экрана, в том числе со сменой ориентации книги
— Лицензия turn.js против коммерческого использования, PageFlip — можно использовать где и как угодно

[Radjah]

Чутьё мне подсказывает, что статье хронически не хватает вычитки в части пунктуации. >_<
ИМХО местами много лишних тире.

Посмотрел пример. При перелистывании с изгибом страницы блоки текста у меня (Firefox 77.0.1) как-то странно выглядят. Страница изгибается, а текст остаётся плоским.