Introduction
Paper folding animation effect is one of the newly introduced effects mainly available in touch devices. It works well with touch gestures, such as swiping to certain direction to reveal content underneath by "folding" the current view. It's a fancy effect and definitely giving its users a cool experience.
Over our sister site favbulous, we have published a post called Paper Folding Effect in App Design, and here in queness, we are going to give you all the resources that would able to achieve paper folding effect in web development. What you have to know is, this effect uses CSS 3D transform such as scale, rotate, skew etc and will work with browsers that supported it. Some of these resources are conceptual and experimental, but they do give you a glance of what lies ahead in the future of web development.
CSS and Javascript Resources
- Oridomi
This is an independent javascript plugin that folds up the DOM like paper. With small file size and optional jQuery support, it folds images, web fonts, animated gifs, almost any DOM element. - 3D Thumbnail Hover Effect
A tutorial from codrops. Impressive manipulation of CSS to generate 3D thumbnail hover effects. It contains 4 types of hover effects and explained in the tutorial. If you want to learn how to make one, you should check this out. - Makisu
Makisu is a javascript plugin for list. You can folding a list up or down. We're not sure how practical is it to be used in web design, but it does look very impressive. - Paper Like Unfolding Effect
Another tutorial from codrops. A different kind of paper folding from the tutorial called PFold: Paper-like Unfolding Effect. It's an experimental jQuery plugins that let's you unfold elements to reveal more content just like on a piece of paper. - Paperfold CSS
This could be the earliest working example of paper folding effect. Showcased in Mozilla Developer Network, this plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3D space. - Folding HTML View
Created by the author of the open source web interface component for mobile devices App-UI. This is the combination of Web UI sliding view and Oridomi folding plugin mentioned above. - Pure CSS Folded Paper Effect
This isn't javascript, or any sort of animation. It's showing us how to style an element with background gradient to create folded paper kind of effect.
Just as a reminder again, I'm pretty sure all of them won't work in IE 9 and below, but if you're targeting mobile platform or safari or chrome, these resources will certainly be helpful. Well, I reckon you still can use it as long as you make it degrade gracefully for other unsupported browsers or devices.
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.