Flip Box Template ( 2 pages front/back + special effects )

Template Gallery
1

Flip Box/Page Effect - 2 pages front/back

Made with Hype© only, no further javascript.

Key feature: dynamical shadow, glossy effect over the page, smooth animation on modern browsers.
Animation with touch/grab support.

> VIEW DEMO

> DOWNLOAD Hype© Template + Resources Folder

Compatibility: Tested on several small devices and desktop browser Mac/Win.

Limitations (in this version)
In this animation I used a trick for the perspective “distortion compensation”
Reduced height of each element in (50%) during the rotation of the page. This means you can not use text elements. You can use images or elements with the same width of the box (edge to edge).

improvements ?
Add javascript to decrease perspective distortion.
Any bugfix…

regards
Michelangelo

9 Likes
2

That is awesome, thanks for sharing it with us.

3

@gasspence Thank a lot!
This is a good example of the power of Hype.

I hope to fix ( maybe with an help) the problem of the perspective distorsion.

here's another nice thing for the community.

regards
Michelangelo

4

Thank you very much @multimago
Both resources will be very usefull !!
Will study your example to see how you coded the flipbox.

1 Like
5

@Olav Thanks
the only problem is the perspective distorsion.

I tried (using unique ID #flip_1 ( CSS in in head HTML ) with the transforms without success.

also on html, body, #index_hype_container

    <style>	 

    #flip_1 {
-webkit-perspective: 1000px !important; 
-moz-perspective: 1000px !important;  
-o-perspective: 1000px !important; 
perspective: 1000px !important;  
    }

    </style>

with the ID i can change any value except the perspective.