Generic Off-canvas Effects with jQuery and CSS3 - Offcanvas.js

File Size: 14 KB
Views Total: 2149
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Generic Off-canvas Effects with jQuery and CSS3 - Offcanvas.js

A simple, unobtrusive jQuery plugin used to create familiar 'off-canvas' effects within any containers. It currently supports 3 off-canvas effects ('overlay', 'push', 'underlay') and comes with lots of options to customize. It brings you a fast way to create mobile app style off-canvas menus/panels for your websites or web applications. More off-canvas effects are coming soon.

This plugin uses the jQuery Transit plugin. All animations and effects are done with CSS3. If you don't want to include this plug-in, Offcanvas will use the normal jQuery $.fn.animate() function. It is recommend to use the Transit plugin, 'cause CSS3 animations are smoother (Especially on mobile devices).

How to use it:

1. load jQuery library and the jQuery transit plugin in your document.

<script src="//"></script>
<script src="//"></script>

2. Load the jQuery offcanvas plugin's stylesheet and script after jQuery.

<link href="jquery.offcanvas.css" rel="stylesheet">
<script src="jquery.offcanvas.js"></script>

3. Call the plugin to generate a basic off-canvas effect within the target container.


// The main canvas selector or jQuery object.
mainCanvas: '.container',

4. All the customization options.


// top|right|bottom|left
position: 'left', 

// push|overlay|underlay

// before|after

// Clone the off-canvas element instead of moving it to the right position.

css: {
  width: '100%',   // <length>, <percentage>
  height: '100%',   // <length>, <percentage>

// If browser doesn't support CSS3 transitions or Transit isn't available
jsFallback:     true,     

// Add further animation options @see
animate:      {},       

// Selector or jQuery object
mainCanvas:        '#page', 

// Make the main canvas click-able
mainCanvasClick:   true, 

// Add further animation options 
// @see
// Overwrites 'animate'
mainCanvasAnimate: {}, 

// Add CSS styles to the main canvas
mainCanvasCss:     {}, 

// Triggered before the off-canvas is shown
onShowBefore:      function() {}, 

// Triggered after the off-canvas is shown
onShowAfter:       function() {}, 

// Triggered before the off-canvas is hidden
onHideBefore:      function() {}, 

// Triggered after the off-canvas is hidden
onHideAfter:       function() {}, 

// Triggered after clicking on the main canvas
onMainCanvasClick: function() {}, 

5. Public methods.

// Hide current off-canvas element.

// Show current off-canvas element.

// Toggle current off-canvas element.

Change logs:


  • v3.0.1. Fixed iOS smooth scrolling


  • v3.0. Options update.


  • v2.2

This awesome jQuery plugin is developed by cheich. For more Advanced Usages, please check the demo page or visit the official website.