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.
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
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.
- Paper Like Unfolding Effect
- 3D Thumbnail Hover Effects
- oriDomi, by Dan Motzenbecker
oriDomi is a fondling effect plugin which works on iOS. It was built in touch handlers with callbacks, with zero dependencies, less than 15k, optional jQuery support.
Some paper folding effects we can find on Dribbble
- UI Abstraction, by Pranav
- UX/UI menu concept with folding effect by Cuberto
- Trainboard by The Funtasty
- UX/iOS/UI iPhone idea with video process by Cuberto
- Fold to Unlock iOS style by Anton Kudin
- Photofold by Supratim Nayak
- Flat Page curl IOS design by Julien Renvoye
- Another unlock concept, by Javi Pérez
- Trainboard, by The Funtasty
- Fold to Refresh, by Ari
- Qiwy iOS/iPhone app curl test by Mikael Eidenberg
- Map Overlay by Fabe
- Paper fold interaction 2 by Gaston Figueroa