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

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="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></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.
$fn.offcanvas({ // The main canvas selector or jQuery object. mainCanvas: '.container', });
4. All the customization options.
$fn.offcanvas({ // top|right|bottom|left position: 'left', // push|overlay|underlay mode:'overlay', // before|after injectPosition:'before', // Clone the off-canvas element instead of moving it to the right position. cloneElement:false, 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 http://api.jquery.com/animate/ animate: {}, // Selector or jQuery object mainCanvas: '#page', // Make the main canvas click-able mainCanvasClick: true, // Add further animation options // @see http://api.jquery.com/animate/ // 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. $('.offcanvas').hide(); // Show current off-canvas element. $('.offcanvas').show(); // Toggle current off-canvas element. $('.offcanvas').toggle();
Change logs:
2015-05-06
- v3.0.1. Fixed iOS smooth scrolling
2015-04-04
- v3.0. Options update.
2015-01-27
- v2.2
This awesome jQuery plugin is developed by cheich. For more Advanced Usages, please check the demo page or visit the official website.