{"id":15069916,"url":"https://github.com/techjacker/backbone-responsive-css3-page-transitions","last_synced_at":"2025-04-10T17:11:08.020Z","repository":{"id":5215160,"uuid":"6391099","full_name":"techjacker/Backbone-Responsive-CSS3-Page-Transitions","owner":"techjacker","description":"CSS3 hardware accelerated page transitions optimised for fluid layouts","archived":false,"fork":false,"pushed_at":"2024-07-30T16:09:45.000Z","size":218,"stargazers_count":35,"open_issues_count":5,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T14:51:20.601Z","etag":null,"topics":["animations","backbone","css3","mobile","page-transitions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Astoundify/wp-job-manager-contact-listing","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techjacker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-10-25T17:11:22.000Z","updated_at":"2022-09-21T14:30:18.000Z","dependencies_parsed_at":"2022-08-29T04:42:38.604Z","dependency_job_id":null,"html_url":"https://github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjacker%2FBackbone-Responsive-CSS3-Page-Transitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjacker%2FBackbone-Responsive-CSS3-Page-Transitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjacker%2FBackbone-Responsive-CSS3-Page-Transitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjacker%2FBackbone-Responsive-CSS3-Page-Transitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techjacker","download_url":"https://codeload.github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248261428,"owners_count":21074222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","backbone","css3","mobile","page-transitions"],"created_at":"2024-09-25T01:45:31.208Z","updated_at":"2025-04-10T17:11:08.001Z","avatar_url":"https://github.com/techjacker.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Backbone Responsive CSS3 Page Transitions\n\n[![Build Status](https://secure.travis-ci.org/techjacker/Backbone-Responsive-CSS3-Page-Transitions.png)](http://travis-ci.org/techjacker/Backbone-Responsive-CSS3-Page-Transitions)\n\nAdds responsive* CSS3 page transitions to backbone.\n- Works on Chrome 12+, Safari 4+, Firefox 14+, ie 10+, Android 2.1+\n- Lightweight: 3k (minified + gzipped)\n- Require.js AMD compatible\n- Falls back to replacing page content if the browser does not support CSS3 translate3d transformations (eg opera)\n\n***** *This plugin does not magically make fixed width layouts into responsive ones. Coding a responsive CSS layout is a prerequisite to using the plugin *****\n\n## [Responsive CSS Framework Demos](http://projects.andrewgriffithsonline.com/#backbone-responsive-CSS3-page-transitions)\n\nTested to work with the following reponsive CSS frameworks:\n1. twitter bootstrap responsive\n2. foundation responsive\n3. skeleton\n4. simplegrid\n\n- [Demos](http://projects.andrewgriffithsonline.com/#backbone-responsive-CSS3-page-transitions) of the CSS frameworks @ [the project homepage](http://projects.andrewgriffithsonline.com/#backbone-responsive-CSS3-page-transitions)\n\n- Demo code available from the [github repo](https://github.com/techjacker/Backbone-CSS3-Page-Transitions-CSS-Frameworks-Demos)\n\n## Install via Package Manager\nGrab from [Jam.js](http://jamjs.org/packages/#/details/backbone.responsiveCSS3transitions):\n```Shell\nme@badass:~$ jam install backbone.responsiveCSS3transitions\n```\nor [Bower](https://npmjs.org/package/bower):\n```Shell\nme@badass:~$ bower install backbone.responsiveCSS3transitions\n```\n\n## Plugins\n### iScroll4 Plugin\n* [iScroll](http://cubiq.org/iscroll-4) plugin available the [github repo](https://github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin)\n* plugin compatible with v0.3+\n* useful for ensuring that page transitions always load the new page scrolled to the top\n* smoother page transitions that avoid scroll \"jumps\"\n\n\n\n\n\n## Getting Started\n### 1. Load the Javascript and CSS\n\n```HTML\n\t\u003clink rel=\"stylesheet\" href=\"scripts/vendor/backbone.responsiveCSS3transitions.min.css\"/\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\t\u003cscript src=\"http://code.jquery.com/jquery-1.7.2.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js\"\u003e\u003c/script\u003e\n\n\t\u003cscript src=\"backbone.responsiveCSS3transitions.min.js\"\u003e\u003c/script\u003e\n```\n#### AMD\n\n##### Backbone Dependency\nPlugin relies upon 'backbone' as a dependency. Make sure that this is set up in your require.js [shim config](https://github.com/jrburke/requirejs/wiki/Upgrading-to-RequireJS-2.0#wiki-shim).\n\n##### Fastclick Dependency\nIf 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\n```JavaScript\n//...... top of backbone.responsiveCSS3transitions.js file\ndefine(['backbone'], factory);\n// if using fastclick then replace the line above with this:\n// define(['backbone', 'fastclick'], factory);\n```\n\n### 2. HTML Set Up: Wrapping Divs\n\n#### Either: 1. wrap your container div with the wrapping divs needed manually\n\n```HTML\n\u003cdiv class=\"threeDTrans-outmost-page-container\"\u003e\n\t\u003cdiv class=\"threeDTrans-page-container\"\u003e\n\n\t\t\u003c!-- your container --\u003e\n\t\t\u003cdiv class=\"my-container threeDTrans-page\"\"\u003e\n\t\t\t\u003cp\u003emy amazing website...\u003c/p\u003e\n\t\t\u003c/div\u003e\n\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Or 2. Specify the jquery selector of the containing element when initiliasing the router\n\n```JavaScript\nvar threeDRouter = backboneResponsiveCSS3Transitions.extend({....});\nvar my Router = new threeDRouter({\"wrapElement\": \".my-container\"});\n```\n\n### 3. Make your router inherit from backboneResponsiveCSS3Transitions instead of Backbone.Router\n\n```JavaScript\nvar threeDRouter = backboneResponsiveCSS3Transitions.extend({...});\nnew threeDRouter();\n\n// your view....\nvar myBackboneView = Backbone.View.extend({\n\tclassName: 'my-container',\n\trender: function () {\n\t\tthis.$el.html('the html of the new page to be inserted');\n\t}\n});\n\n// your router class loading your view\nvar threeDRouter = backboneResponsiveCSS3Transitions.extend({\n\troutes: {\n\t\t\"*default\": \"loadView\",\n\t},\n\tloadView: function (viewFragment) {\n\t\t// ...\n\t\tthis.triggerTransition(myBackboneView, options);\n\t}\n});\n\n// your app instantiaing the router\napp = {\n\t// ...\n\tinit: function() {\n\t\tnew threeDRouter(options);\n\t\tBackbone.history.start();\n\t}\n}\napp.init();\n```\n\n#### Router Instantiation Options\n\n##### @param {options}\n* accepts: object\n\n##### @param {options.renderCallback}\n* accepts: boolean\n* description: make the page transitions wait for the render event to be emitted before triggering the page animation. Useful if you're loading templates with ajax.\n\n```JavaScript\n// ... set the renderCallback option to true when initialising your router\nvar threeDRouter = backboneResponsiveCSS3Transitions.extend({....});\nthreeDRouter = new threeDRouter({\"renderCallback\": true});\n\n// ...in your view class...\nvar myBackboneView = Backbone.View.extend({\n\t// ...\n\trender: function () {\n\t\t// ...\n\t\tthis.trigger('render');\n\t}\n});\n```\n\n##### @param {options.wrapElement}\n* accepts: boolean\n* description: the jquery selector of the html element that contains your content. If you want the js to take care of adding the wrapping divs then set this. **** If you choose this option then the html element must be present on the page when the router is instantiated. If it is inside one of your backbone views that hasn't been loaded onto the page yet on first page load then it will fail miserably ****\n\n```JavaScript\nvar threeDRouter = backboneResponsiveCSS3Transitions.extend({....});\nnew threeDRouter({\"wrapElement\": \".my-container\"});\n```\n\n##### @param {options.fastClick}\n* accepts: fastClick function/constructor\n* description: assign the function you want to call on links in order to remove click delay on touch devices, I recommend [fastclick.js](https://github.com/ftlabs/fastclick) Eg:\n\n\t\t// include lib in index.html\n\t\t\u003cscript src=\"scripts/vendor/fastclick.js\"\u003e\u003c/script\u003e\n\n\t\t// in your js\n\t\tnew threeDRouter({\"fastClick\": window.FastClick});\n\n\n### 4. Use this.triggerTransition(ViewClass, options) in your router's routes' callbacks to trigger the page transition\n\n```JavaScript\nvar threeDRouter = backboneResponsiveCSS3Transitions.extend({\n\tinitialize: function (opts) {\n\t\t// ...\n\t},\n\troutes: {\n\t\t\"*default\": \"loadView\",\n\t},\n\n\tloadView: function (viewFragment) {\n\n\t\t// ... your own route logic here\n\t\t// @param {ViewClass} (mandatory) \u003e the backbone view class that you want to load\n\t\t// @param {options}\n\t\tthis.triggerTransition(ViewClass, options);\n\t}\n});\n```\n\n#### Parameters\n\n##### ViewClass\nThe backbone view class of the new page to be inserted.\nIt's render method will be called before inserting it into the new page.\n###### @param {viewClass}\n* accepts: Backbone View Class\n\n#### options object\n###### @param {options}\n* accepts: object\n\n###### @param {options.viewInitOps}\n* accepts: object\n* description: passed as the options object when instantiating the new view\n\n###### @param {options.renderParams}\n* accepts: any type\n* description: passed as params when calling the new view render's method\n\n###### @param {options.direction}\n* accepts: string (\"backwards\", \"forwards\", \"default\")\n* description: manually override direction calculation by supplying your own value\ndefault = just swaps the new page html without applying a sliding transition\n\n\n#### Events\nThe 'threeDTrans.pageTransitionComplete' event is triggered by the router when the page transition is complete.\n\n\n### 5. Direction of the page transition\n\nThe direction is automatically calculated based upon comparing the folder depths of the new and previous url hashes.\nThe default is no transition ie just replace html.\n\n- backwards: moving from #sports/football/premiership to #sports\n- forwards: moving from #sports to #sports/football\n- default: moving from #sports/football to #sports/rugby\n\n#### You can manually override this by specifying the direction yourself when calling the this.triggerTransition() method, eg:\n\n```JavaScript\nvar threeDRouter = backboneResponsiveCSS3Transitions.extend({\n\t// ...\n\troutes: {\n\t\t\"*default\": \"loadView\",\n\t},\n\tloadView: function (viewFragment) {\n\t\tif (viewFragment.match(/foobar/)) {\n\t\t\tthis.triggerTransition(myView, {\"direction\": \"forwards\"});\n\t\t} else {\n\t\t\tthis.triggerTransition(myView);\n\t\t}\n\t}\n});\n```\n\n\n## Example Code\n```HTML\n\t\u003c!-- ... --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"scripts/vendor/backbone.responsiveCSS3transitions.min.css\"/\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\t\u003c!-- ... --\u003e\n\n\t\u003cscript src=\"http://code.jquery.com/jquery-1.7.2.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js\"\u003e\u003c/script\u003e\n\n\t\u003cscript src=\"backbone.responsiveCSS3transitions.min.js\"\u003e\u003c/script\u003e\n\n\t\u003cscript\u003e\n\tvar threeDRouter = backboneResponsiveCSS3Transitions.extend({\n\t\tinitialize: function (opts) {\n\t\t\t// ...\n\t\t},\n\t\troutes: {\n\t\t\t// ... your own route logic here\n\t\t\t\"*default\": \"loadView\",\n\t\t},\n\t\tloadView: function (viewFragment) {\n\n\t\t\tvar myBackboneView = Backbone.View.extend({\n\t\t\t\tclassName: 'my-container',\n\t\t\t\ttemplate: 'application.ejs',\n\t\t\t\tloadTemplate: function (vars, name, dir) {\n\t\t\t\t\tvar self = this;\n\t\t\t\t\tvars = vars || {};\n\t\t\t\t\tdir = dir || 'scripts/templates/';\n\t\t\t\t\tname = name || this.template;\n\t\t\t\t\treturn $.get(dir + name).pipe(function (tmpl) {\n\t\t\t\t\t\ttmpl = _.template(tmpl);\n\t\t\t\t\t\tself.$el.html(tmpl(vars));\n\t\t\t\t\t\tself.trigger('render');\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\trender: function () {\n\t\t\t\t\tthis.loadTemplate({ foo: urlParams});\n\t\t\t\t}\n\t\t\t}),\n\t\t\toptions = {\n\t\t\t\tdirection: \"forwards\",\n\t\t\t\trenderParams: \"imprenderParams\",\n\t\t\t\tviewInitOps: {\n\t\t\t\t\t\"yourImportantViewInitUpVars\" : \"here\"\n\t\t\t\t}\n\t\t\t};\n\n\t\t\t// ... your own route logic here\n\n\t\t\tthis.triggerTransition(myBackboneView, options);\n\t\t}\n\t});\n\n\tvar options = {\n\t\t\t\"renderCallback\": true,\n\t\t\t\"wrapElement\": \".my-container\"\n\t\t},\n\tmyRouter = new threeDRouter(options);\n\n\tBackbone.history.start();\n\n\t\u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Centered Designs with outer gutters\nAs used in all the [demos](http://projects.andrewgriffithsonline.com/#backbone-responsive-CSS3-page-transitions).\n\nApply the margins to the target wrapping element, eg:\n```JavaScript\n// specify the wrapping div when instantiating the router...\nnew threeDRouter({\"wrapElement\": \".my-container\"});\n```\n\nin your stylesheet...\n```CSS\n.my-container {\n\twidth: 94%;\n\tmargin: 0 3%;\n}\n```\n\n## Caveats / Gotchas / Why isn't it working???\n1. Ensure that your Backbone Views have a render method\nThe backboneResponsiveCSS3Transitions will insert the new view.$el into the page once it has called the render method.\nIf your view emits a render event and you would like the page animation to be delayed until this is emitted then set this an option when instantiating the router.\n2. The router takes care of inserting the views on to the page - do not include this logic in your views!\n3. If the browser does not support CSS3 transitions then they fall back to just plain old $el.html('new html') replacing html.\n4. If you want the js to take care of adding the wrapping divs then the html element must be present on the page when the router is instantiated.\n5. The wrapping element's immediate children should have 100% width for gutter effect to work\nie this works\n```CSS\n\t.wrapper {width: 90%; margin: 0 auto;}\n\t.child {width:auto;}\n```\nie this WON'T work\n```CSS\n\t.wrapper {width: 100%;}\n\t.child {padding:0 15%;}\n```\n\n\n\n## Tests\nRun the tests via command line:\n\n\t$ npm install\n\t$ npm test\n\nRun the tests via browser:\n\n1. fire up a node http server\n\n\t\t$ node server.js\n\n2. go to http://0.0.0.0:8124/test.html\n\n\n## To do\n- Add iOS support\n\n\n## Release History\n* 0.1.0\n* 0.2.0 \t- Added Android Support\n* 0.2.1 \t- Added FastClick functionality + fixed ie10 bug\n* 0.3.0 \t- Added iScroll plugin compatibility (released as separate plugin)\n* 0.3.1 \t- Render callback bug fix\n* 0.3.2-3 \t- Add travis CI\n* 0.3.4 \t- Update dev dependencies","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechjacker%2Fbackbone-responsive-css3-page-transitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechjacker%2Fbackbone-responsive-css3-page-transitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechjacker%2Fbackbone-responsive-css3-page-transitions/lists"}