search

blasten / turn.js

The page flip effect for HTML5
www.turnjs.com
Other
7.22k stars 2.48k forks source link

Can we make responsive flipbook? #420

Open MohammadSabbagh opened 10 years ago

MohammadSabbagh commented 10 years ago

Can we make responsive flipbook?

TimOgilvy commented 10 years ago

Have you tried using media queries to resize page & book CSS?

Would probably also need a javascript resize event to set flip book properties.

It would be great if this worked!

MohammadSabbagh commented 10 years ago

i tried make the css the javascript sizes to % percentage but didnt work

i think the way you said can work but the code is not little complicated

i will give it a try if i got time

thanks

TimOgilvy commented 10 years ago

yeah I might try if I have time to. Will post a link if I discover anything useful. I suspect its probably a nightmare tho.

TimOgilvy commented 10 years ago

I've set one up with media queries, which I will post a link to soon. In the meantime there's some info back at issue 70:

https://github.com/blasten/turn.js/issues/70

TimOgilvy commented 10 years ago

Ok here's my responsive book so far: http://warlpiri.brightworkmedia.net/

It uses three media queries for height and width, and a jQuery onresize event to call flipbook.turn("size",X,Y).

Seems to work OK although there are discrepancies between CSS min-width and jQuery document or window width, so breakpoints are not exactly the same, and I suspect that my guesstimates area bit rudimentary at present.

kmturley commented 10 years ago

I've made a responsive version here: http://kmturley.blogspot.com/2014/02/responsive-magazine-using-turnjs.html

sunshinegreen commented 10 years ago

Yes, it can be achieved. I see that some friends made some flipping page books. See the flipbook demos here: http://bit.ly/TuSE8l

nickiehow commented 10 years ago

Hi TimOgilvy, do you purchase turn.js? can anyone help me how do develop flip book pure javascript possible? logic?