CSS3 hardware accelerated page transitions optimised for fluid layouts
Adds responsive* CSS3 page transitions to backbone.
* This plugin does not magically make fixed width layouts into responsive ones. Coding a responsive CSS layout is a prerequisite to using the plugin **
Tested to work with the following reponsive CSS frameworks:
Demos of the CSS frameworks @ the project homepage
Demo code available from the github repo
Grab from Jam.js:
me@badass:~$ jam install backbone.responsiveCSS3transitions
or Bower:
me@badass:~$ bower install backbone.responsiveCSS3transitions
<link rel="stylesheet" href="scripts/vendor/backbone.responsiveCSS3transitions.min.css"/></head><body><script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script><script src="backbone.responsiveCSS3transitions.min.js"></script>
Plugin relies upon ‘backbone’ as a dependency. Make sure that this is set up in your require.js shim config.
If you want to use the fastclick functionality with an AMD set up then you should set up your shim config as with backbone and then edit the AMD definition in backbone.responsiveCSS3transitions.js
//...... top of backbone.responsiveCSS3transitions.js filedefine(['backbone'], factory);// if using fastclick then replace the line above with this:// define(['backbone', 'fastclick'], factory);
<div class="threeDTrans-outmost-page-container"><div class="threeDTrans-page-container"><!-- your container --><div class="my-container threeDTrans-page""><p>my amazing website...</p></div></div></div>
var threeDRouter = backboneResponsiveCSS3Transitions.extend({....});var my Router = new threeDRouter({"wrapElement": ".my-container"});
var threeDRouter = backboneResponsiveCSS3Transitions.extend({...});new threeDRouter();// your view....var myBackboneView = Backbone.View.extend({className: 'my-container',render: function () {this.$el.html('the html of the new page to be inserted');}});// your router class loading your viewvar threeDRouter = backboneResponsiveCSS3Transitions.extend({routes: {"*default": "loadView",},loadView: function (viewFragment) {// ...this.triggerTransition(myBackboneView, options);}});// your app instantiaing the routerapp = {// ...init: function() {new threeDRouter(options);Backbone.history.start();}}app.init();
// ... set the renderCallback option to true when initialising your routervar threeDRouter = backboneResponsiveCSS3Transitions.extend({....});threeDRouter = new threeDRouter({"renderCallback": true});// ...in your view class...var myBackboneView = Backbone.View.extend({// ...render: function () {// ...this.trigger('render');}});
var threeDRouter = backboneResponsiveCSS3Transitions.extend({....});new threeDRouter({"wrapElement": ".my-container"});
description: assign the function you want to call on links in order to remove click delay on touch devices, I recommend fastclick.js Eg:
// include lib in index.html<script src="scripts/vendor/fastclick.js"></script>// in your jsnew threeDRouter({"fastClick": window.FastClick});
var threeDRouter = backboneResponsiveCSS3Transitions.extend({initialize: function (opts) {// ...},routes: {"*default": "loadView",},loadView: function (viewFragment) {// ... your own route logic here// @param {ViewClass} (mandatory) > the backbone view class that you want to load// @param {options}this.triggerTransition(ViewClass, options);}});
The backbone view class of the new page to be inserted.
It’s render method will be called before inserting it into the new page.
The ‘threeDTrans.pageTransitionComplete’ event is triggered by the router when the page transition is complete.
The direction is automatically calculated based upon comparing the folder depths of the new and previous url hashes.
The default is no transition ie just replace html.
var threeDRouter = backboneResponsiveCSS3Transitions.extend({// ...routes: {"*default": "loadView",},loadView: function (viewFragment) {if (viewFragment.match(/foobar/)) {this.triggerTransition(myView, {"direction": "forwards"});} else {this.triggerTransition(myView);}}});
<!-- ... --><link rel="stylesheet" href="scripts/vendor/backbone.responsiveCSS3transitions.min.css"/></head><body><!-- ... --><script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script><script src="backbone.responsiveCSS3transitions.min.js"></script><script>var threeDRouter = backboneResponsiveCSS3Transitions.extend({initialize: function (opts) {// ...},routes: {// ... your own route logic here"*default": "loadView",},loadView: function (viewFragment) {var myBackboneView = Backbone.View.extend({className: 'my-container',template: 'application.ejs',loadTemplate: function (vars, name, dir) {var self = this;vars = vars || {};dir = dir || 'scripts/templates/';name = name || this.template;return $.get(dir + name).pipe(function (tmpl) {tmpl = _.template(tmpl);self.$el.html(tmpl(vars));self.trigger('render');});},render: function () {this.loadTemplate({ foo: urlParams});}}),options = {direction: "forwards",renderParams: "imprenderParams",viewInitOps: {"yourImportantViewInitUpVars" : "here"}};// ... your own route logic herethis.triggerTransition(myBackboneView, options);}});var options = {"renderCallback": true,"wrapElement": ".my-container"},myRouter = new threeDRouter(options);Backbone.history.start();</script></body>
As used in all the demos.
Apply the margins to the target wrapping element, eg:
// specify the wrapping div when instantiating the router...new threeDRouter({"wrapElement": ".my-container"});
in your stylesheet…
.my-container {width: 94%;margin: 0 3%;}
ie this WON’T work
.wrapper {width: 90%; margin: 0 auto;}.child {width:auto;}
.wrapper {width: 100%;}.child {padding:0 15%;}
Run the tests via command line:
$ npm install$ npm test
Run the tests via browser:
fire up a node http server
$ node server.js