Creating a Folded Paper Effect with OriDomi

Aurelio De Rosa
Aurelio De Rosa
Share

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

How can I create a folded paper effect using OriDomi?

Creating a folded paper effect using OriDomi involves a few steps. First, you need to include the OriDomi library in your HTML file. Then, you can select an element to fold by creating a new OriDomi instance. You can then use various methods provided by the library to fold, unfold, or ripple the element. Remember to include the necessary CSS to ensure the folds appear correctly.

What are the key differences between OriDomi and Origami Simulator?

While both OriDomi and Origami Simulator allow you to create folded paper effects, they have some key differences. OriDomi is a JavaScript library that you can use to fold DOM elements on your web pages. On the other hand, Origami Simulator is a standalone application that lets you simulate and design origami models.

Can I use OriDomi on any website?

Yes, OriDomi can be used on any website. It’s a JavaScript library, so it can be included in any HTML file. However, it’s important to note that the library uses CSS3 transformations, which may not be fully supported in older browsers.

How does OriDomi compare to traditional paper folding?

OriDomi allows you to create a digital version of paper folding. While traditional paper folding involves physically manipulating paper, OriDomi lets you create similar effects digitally using JavaScript and CSS. This can be useful for creating unique and interactive web designs.

What are some common uses for OriDomi?

OriDomi can be used for a variety of purposes on a website. It can be used to create unique and interactive navigation menus, image galleries, or even entire web pages. The library provides a variety of folding methods, allowing you to create a wide range of effects.

How can I customize the folding effect in OriDomi?

OriDomi provides a variety of options for customizing the folding effect. You can specify the number of panels, the angle of the fold, and the direction of the fold. You can also choose whether the fold should be smooth or sharp.

Can I use OriDomi with other JavaScript libraries?

Yes, OriDomi can be used alongside other JavaScript libraries. However, it’s important to ensure that there are no conflicts between the libraries. If you’re using jQuery, for example, you should use the jQuery version of OriDomi.

What are the browser requirements for OriDomi?

OriDomi uses CSS3 transformations, so it requires a modern browser that supports these features. This includes the latest versions of Chrome, Firefox, Safari, and Edge. Internet Explorer 10 and above also support CSS3 transformations, but with some limitations.

Can I use OriDomi for commercial projects?

Yes, you can use OriDomi for commercial projects. However, you should check the license agreement for any restrictions or requirements. For example, you may be required to include a link back to the OriDomi website.

How can I get help if I’m having trouble with OriDomi?

If you’re having trouble with OriDomi, you can check the documentation on the OriDomi website. This includes a detailed guide on how to use the library, as well as a list of all the available methods and options. If you’re still having trouble, you can contact the developer directly for support.