Fold divs like Paper (Animation)
Most of the websites nowadays are based on flat design, but now imagine you can fold it up and make amazing animations. Today, I’ll show you how can create a fold up effect like folding a paper. Using a library called OriDomi. This is an effect, you just might been looking for to pump up your website.
OriDomi setting up is very easy. The first step you need to perform is to download the library and include it in your page. It is a github project so you can fork the project or download the library from here.
Below is a small example of the fold effect.
[code lang=”html”]
<script src=”oridomi.min.js”></script>
<script> new OriDomi(‘.demo’); </script>
<div class=”demo”>
<h3>Fold Me.</h3>
</div>
[/code]
The best part of this technique is that, it is very flexible. You can be apply to elements of any color, and the background will show through! You can make best use of this for websites like a book library or displaying the menu for a restaurant website.
Also, OriDomi exposes a lot of effects through a series of methods. Most of these methods accept a folding angle as their first argument. Like “accordion()” method does as it is the default effect. Another method is “twist()”. Using it, you can twist the DOM element on itself. You can view the various methods with different angles on the official site.
