Stunning Resources for Paper Folding Animation Effect

the Paper Folding Effect simulates the folds in a piece of paper in elements of your website

  • Share on Google
  • Share on Stumbleupon

Today on the blog we’re presenting what could be a very effective and inspiring resource for your web UX: the Paper Folding Effect. This effect simulates the folds in a piece of paper in elements of your website such as menus, buttons, pictures or selectors.

Implementing it is usually simple and they can range from using just CSS to more elaborate and lively effects with Javascript and jQuery actions.

But let's not reinvent the wheel: Many of these applications are available on the web to those wanting to use them. As always good practice requires you acknowledge the source and thank the authors and do not use them for commercial purposes. Today we present a collection of some that are available to download and apply to your website to make it more stunning and interactive.

Just with CSS | With CSS and Javascript




Just with CSS

Some are simple enough that they do not need to run script code. Just use CSS style settings to play and perform visual effects that simulate the folding transformations.


CSS with JavaScript

For more complex animated effects is possible using javascript snippets as animation engine enabling actions executed by the end user.




Some paper folding effects we can find on Dribbble

Awwwards

By Awwwards Team

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world. We aim to create a meeting point where web professionals from across the world can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.

awwwards.com

1 2 3 4 5
CLOSE