Work

Off.canvas

Launch Project🚀

Off.canvas is an HTML, CSS and Javascript off canvas navigation framework.

Why Off Canvas?

I started developing Off.canvas during a project that required the use of a hidden side panel, the kind seen often in native smartphone apps.


Requirements

I needed to have the side panel(s) and the main page scroll independently and to maintain a fixed top bar during scrolling. As the panel slid in from the side I wanted the main part of the page to slide off screen, as it does in apps, rather than squash to fit the shrinking space.

Those requirements meant I had to turn the body element into a 'window' whose overflow is hidden and create the main and side sections as scrollable areas within that. To enable the scroll-ability of overflow:auto elements on older mobile operating systems such as iOS 4 and Android 2.3 I've used the Overthrow polyfill.


Realistic Animation

Initially the main section covers the side panel(s) completely, then when the sliding is triggered the main section moves aside to reveal the side bar. In fact, the side bar is positioned only partially off screen so that during animation it moves at a slightly slower speed to the main section above it to create a layered effect.


Fast Animation

For the sliding animation I've made use of the hardware accelerated translate3D property to get it as smooth and stutter free as possible. For older none supporting browsers Modernizr gives them left or right positioning values to use instead.


What happens without Javascript?

The properties that create the off canvas effect come from classes which are added in by javascript over the top of an already fully usable layout. If there's no javascript all the content is visible in an ordinary columned layout.


Is it ready for everyone to use?

Check the GitHub repo for the latest changes.


Work

Other Projects