Implement Impressive JavaScript Paper Folding Effects

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

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

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.

Related posts:


About the Author

A web developer who has a love for creativity and enjoys experimenting with various techniques in both web design and development. If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>