webOS Nation Forums >  webOS Developers >  webOS Development > Any way to achieve a fluent page flipping effect (HTML5)?
Any way to achieve a fluent page flipping effect (HTML5)?
  Reply
 
Thread Tools Display Modes
Old 02/24/2013, 05:02 PM   #1 (permalink)
Member
 
happyferretE's Avatar
 
Posts: 7
Hi everyone.

First of all, let me say that the WebOS line of phones/tablets is really quite a nice one. I really enjoy the look and feel of my HP Pre 3, ever since the day I bought it approximately 6 months ago.

However, there's been something increasingly frustrating about this device (WebOS as a whole, actually), that I just can't seem to circumvent.

The lack of WebGL and CSS 3D support is rather discouraging.

While the missing support for WebGL can probably be fixed on an app-app basis (binding the calls to OpenGL ES), CSS 3D is a whole other matter.

Right now, I'm trying to create a children's book app I can then pack as IPK (as well as for other devices, running Android, iOS, Windows Phone and Blackberry 10).

I'd like to use dynamic page transitions (preferably with easing). Normally, I'd just utilize jquery and a few CSS transforms. However, my intensive research (I've tried pretty much every existing library, out of which only one would work with my HP Pre 3's browser, but would lack the required dynamics*) turned up not a single efficient and dynamic technique that would actually work with WebOS (2.x)

So to be blunt, my question is: Is there any way to achieve believable "3D" page transitions inside WebOS' browser?


*Simply touching the edge of a page isn't really an elegant solution, IMHO. I'd like my ebook to support pinching and swipping, as well.
happyferretE is offline   Reply With Quote
Old 02/25/2013, 10:50 AM   #2 (permalink)
Member
 
Posts: 2,513
I don't think so, I tried to do that as well, I ended using no animations whatsoever for the page flipping
__________________
Just remember: If I helped you, press the thanks button!

Owner of: Pre Sprint, Pre Telcel, Pre Plus AT&T, Pre 2 Unlocked, Pixi Plus AT&T, and 2 TouchPads (my Pre3 was stolen so it won't appear again here).
Needs: Veer (anyone?)
Apps: Subnet Calculator, FreeCam, PhotoFun, NuttyPad (work in progress)
HomeBrew: meta-doctor and Messaging Plugins collaborator
Twitter: @cesarneg
NuttyBunny is offline   Reply With Quote
Old 02/25/2013, 10:57 AM   #3 (permalink)
Member
 
GMMan's Avatar
 
Posts: 2,136
I think the Kindle app on the TouchPad had pretty good page turning animations.
__________________
Contact: @GMMan_BZFlag (me on Twitter)
webOS Releases: Change your App Catalog country: TouchPad/PC | TouchPad/webOS Resources | Search suggestion patch for browser | Cycling Email Notifications | Don't Doctor! Make a good support request. | How to post logs | webOS Charge Monitor
GMMan is offline   Reply With Quote
Old 02/25/2013, 11:28 AM   #4 (permalink)
Homebrew Developer
 
Posts: 144
It can be done - for inspiration check Pure CSS3 Page Flip Effect (I have test ipk somewhere in the archive with tweaked css for webos - but this was the original implementation)
artxxork is offline   Reply With Quote
Old 02/25/2013, 11:02 PM   #5 (permalink)
Member
 
happyferretE's Avatar
 
Posts: 7
Thanks. I'll try this out.

Surprised it would work with WebOS, though. Very few of the CSS3 transitions I tried actually worked as they should.

20 Things I Learned About Browsers and the Web and a few others would implicate from the start that my browser was lacking support, while other frameworks/solutions would simply not accept any input.
happyferretE is offline   Reply With Quote
Old 02/25/2013, 11:12 PM   #6 (permalink)
Member
 
GMMan's Avatar
 
Posts: 2,136
I think the support might be from WebKit than any standards. The animate entities (or whatever they're called in CSS) have "-webkit" prepended. There was also something about Enyo 1 not working properly on non WebKit based browsers, so I assume Enyo used a lot of WebKit specific features.
__________________
Contact: @GMMan_BZFlag (me on Twitter)
webOS Releases: Change your App Catalog country: TouchPad/PC | TouchPad/webOS Resources | Search suggestion patch for browser | Cycling Email Notifications | Don't Doctor! Make a good support request. | How to post logs | webOS Charge Monitor
GMMan is offline   Reply With Quote
Old 02/26/2013, 03:52 PM   #7 (permalink)
Member
 
happyferretE's Avatar
 
Posts: 7
Finally got around trying the example by Román Cortés.
The transition is kind of faulty, but that's probably nothing some math tricks/trial and error couldn't fix.

What I'm more concerned about is how difficult it might prove to add several more pages and a more defined sweetspot for opening those pages.

On another note:

Is there any way any of these samples could work with WebOS 2.x?

Experimental Page Layout Inspired by Flipboard | Codrops
BookBlock: A Content Flip Plugin | Codrops
Easing - Demos - Booklet - jQuery Plugin
happyferretE is offline   Reply With Quote
Reply

 

Thread Tools
Display Modes



 


Content Relevant URLs by vBSEO 3.6.0