A few months back I released App-UI, a UI container toolkit for creating HTML experiences. It gives you common “view navigator” paradigms for mobile experiences… a view navigator stack that can push and pop views, a split view navigator, and a “sliding view” like Facebook’s iOS experience. All of which are created entirely with HTML, CSS, and JavaScript, so they are great for mobile web or PhoneGap applications.
Although I haven’t committed many changes to App-UI recently, I’ve been evaluating different types of visual effects and thinking through options for making App-UI more configurable. Recently I stumbled across OriDomi, a toolkit that easily provides the ability to fold UI elements as though they were made of paper. There have been a few interesting UI-folding proof of concepts and demos floating around lately (such as this, this, and this), and I realized:
- This can be done completely in HTML, CSS, & JS
- This can be integrated into App-UI
- It can be real for anyone to use
Below you can view the result of a day’s worth of tinkering:
I created this as an offshoot of the “Sliding View” demos – It is not integrated into the core functionality since not everyone is going to want it in their apps, but it is pretty easy to add. You can check out both of my demos/samples below, with full source code. Just be forewarned: they only work on newer browsers that support CSS3 3D transformations and transitions (WebKit for best results). I’ve tested it in Chrome on OS X and mobile Safari, and it works great. It does not work on Android.
I made a few changes to the open source OriDomi library, most importantly the ability to toggle between “live DOM” and the copied views that have the visual effects applied. This allows me to have event listeners on DOM elements that can actually respond to user input. I also added the ability to support DOM updates (it recreates itself to display changes), and added a “destroy” function to have it clean itself up from memory.
The first example is really basic. It is an instance of the SlidingView that uses a modified version of the OriDomi toolkit to add a “fold” effect to the left sidebar. I just wanted to show a basic use case, demonstrating the effect on “live” DOM elements. You can check it out in your browser by clicking on the link/image below:
The second example is not quite as pretty, but definitely more complex. It is an extension of my side-by-side ViewNavigators inside of a SlidingView, with the folding effect applied. This example demonstrates complex objects with DOM manipulation having the fold effect applied. You can also check this one out in your browser by clicking on the link/image below:
… and this is just the tip of the iceberg.
Based on my experimentation so far, I’ve got big plans for App-UI. I fully intend on rewriting how effects are applied to all of the container elements to enable them to be more configurable, have custom effect classes, and support multiple visual effects options.
Enjoy!