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 OriDomiGetting 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:
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:
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:
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.
OptionsWhen 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
The following example shows you the effect of changing the default value of
speed, and how to log on the console when a user ends playing with the element by attaching a callback through
Let’s now see what other effects OriDomi has to offer.
EffectsAs 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
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
fracture(), but there are even more to try.
ConclusionIn 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?
Can I use OriDomi on any website?
How does OriDomi compare to traditional paper folding?
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.
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.