Paper folding animation effect is a new paradigm in web design. It works with touch devices like swiping to certain direction to reveal content underneath by “folding” the current view. It’s really a fancy effect and definitely giving its users a cool experience. Here in this post I am going to give you few resources that will surely inspire you to achieve paper folding effect in web development.

Folding HTML View

This effect is created entirely with HTML, CSS, and JavaScript, so they are great for mobile web or PhoneGap applications.



Oridomi 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.



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.

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.


3D Thumbnail Hover Effect

It is a 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.

Fields with (*) are required.


Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Design Quote | Web Design Estimate

Related Post

June 2017
« May    
Pond Calculator

Select Pond Shape

Powered by Pond Supplies for Less

Our Calculator Estimates The Following Size For Your Pond Liner:

Pond Volume: 0 US Gallons | Liters: 0 | Imperial Gallons: 0

Estimated Pond Liner Size: 0 X 0 Feet

Note: Pond liner size estimate includes a 1 foot overlap on all sides.

Powered by Pond Supplies For Less