Creating a Folded Paper Effect with OriDomi

A lot of websites built using well-known frameworks such as Bootstrap end very similar to each other. I’m not against their use. On the contrary, I’m happy that thanks to these frameworks a lot of people are able to create their own website, even with very little knowledge. Nonetheless, every website needs to be different in some way to be recognizable. Different doesn’t mean that you have to create incredible layouts or astonishing animations, it can also be the addition of a small effect. In this article I’ll show you how can create a fold up effect using a library called OriDomi. This effect just might be the touch of class your website needs.

What’s OriDomi?

OriDomi (an interesting word to combine “Origami” and “DOM”) is a library to fold up DOM elements like paper. I find the effects it performs simple but very effective, and I think it’s really a good fit for websites of restaurants and pubs. OriDomi doesn’t have any dependency so you don’t have to fill your web page with a lot of other libraries to use it. However, the library can also be used as a jQuery plugin. It’s quite popular on the jQuery plugin registry, so you may have already heard of it. To give you an idea of what it does, here is a simple example: Intrigued? You should be! And this is just one of the effects you can create in your pages. Let’s discover more.

Getting Started with OriDomi

Getting started with OriDomi is very easy. The first step you need to perform is to download the library and include it in your page. You can obtain OriDomi by visiting its GitHub repository or through Bower, the famous dependencies manager for the web, typing the command: [shell] bower install oridomi [/shell] Once you have downloaded the library, you have to include it in your page using the usual <script> tag as shown below:

<script src="path/to/oridomi/oridomi.min.js"></script>

At this point you’re ready to use it on any element you want. The element must the passed to the method OriDomi() that has to be called as a constructor (using the new keyword). A minimal example that employs this library is shown below:

new OriDomi(document.getElementById('element'));

Alternatively, you can pass a selector to the method as we’ve seen in the first demo of this article. In this case, the effect will be applied to the first element matched:

new OriDomi('.my-class');

It’s worth noting that while the effect works regardless of the element’s type and if it has a background or not, the library works best when used with images or elements with a background image. The following example shows the effect on a div element without a background image: Notice how the element has an effect applied, but it doesn’t look so good. Now that we’ve seen the basics of OriDomi, let’s discuss how we can tweak the default settings.

Options

When creating a new OriDomi composition, you can pass an object literal to specify the options you want to apply as the second argument. OriDomi offers several options to configure an effect. When folding an element from the left or the right, the library will divide the element in five panels. In a similar way, when folding an element from the top or the bottom, by default OriDomi divides the element in three panels. We can change these defaults by passing different values for the vPanels and the hPanels options respectively. Another option we can configure is speed that indicates the speed at which the animation is performed. The default value is 700 milliseconds. Note: At the time of writing the documentation asserts the default speed is 1200 ms. However, taking a look at the code you can see that it’s actually 700 ms. In case you want to disable the possibility for your users to interact with the element, for example if you want to only apply effects programmatically, you can set the touchEnabled property to true. In regard of interaction, OriDomi offers few hooks to execute callbacks after a given action is performed. For example, you can run a specific function after an interaction is started or completed. The options that you can use to run the callbacks are touchStartCallback, touchMoveCallback, and touchEndCallback. The following example shows you the effect of changing the default value of vPanels, speed, and how to log on the console when a user ends playing with the element by attaching a callback through touchEndCallback. Let’s now see what other effects OriDomi has to offer.

Effects

As I said, OriDomi exposes a lot of effects through a series of methods. Most of these methods accept a folding angle as their first argument. We’ve already seen what the accordion() method does as it is the default effect. Another method is twist(). Using it, you can twist the DOM element on itself. The following demo displays the effect achieved using twist(): In case you want to roll up (read hide) the element completely, foldUp() is the method to employ. One the contrary, if you want to show it again, you can call unfold(). A demo that uses both these methods is shown below: The last couple of methods I want to mention are curl() and fracture(), but there are even more to try.

Conclusion

In this article I introduced you to OriDomi, a library that allows you to create nice fold up effects on the elements of a web page. I haven’t covered all the options and the effects available, but this tutorial should have interested you enough to learn more about it. In addition, the library has very good documentation that you can read to discover more about how you can queue effects and other advanced uses. What do you think about OriDomi? Have you ever heard of or used it?

Frequently Asked Questions about Creating a Folded Paper Effect with OriDomi