Picture Streams + Momentum Engine + Bézier Paths + Cross-Browser + Cross-Device
TremulaJS is a client-side javascript UI component providing Bézier-based content-stream interactions with momentum & physics effects for mouse, scroll and and touch UIs.
Put another way, TremulaJS can be thought of as an extremely bad-ass image carousel.
Watch the TremulaJS video demo here
-
Play with the live component demo
-
Experiment with the configuration file on CodePen
-
Get up-and-running with the fully-documented boilerplate file, includes a summary of all configuration settings.
-
Download, Fork, Contribute on GitHub
-
Learn how to create your own Grid Projections -- technical articles
coming soonhere!
follow @garris
cd to the root of your project then...
$ bower install tremulajs --save
Optional install for mocha test framework and local host server (this is just a convenience for testing on local phones and tablets.)
cd to the tremulajs directory then...
$ npm install
This feature will auto scroll the stream so that a single item is always presented in the center of the screen -- this is a cover-flow "like" behavior.
To view the functionality, open the demo here and call any of the following methods in the console...
loadMountainPop()
loadCarouselWithPop()
loadHorizontalPop()
TremulaJS is happy to run with a local data source. You will need to make sure your browser is not throwing a security error though. Safari typically does not have an issue with this. If you prefer to use chrome you can do a google search to find out how to disable same origin policy. Or, you can just run the handy server -- follow the instructions below...
cd to the tremulajs directory then...
$ node server.js
Running tests will require MochaJS. To add, cd to the tremulajs directory then run...
$ npm install
Then you can run the test script with the test server running (or you can skip that part and use a browser with same origin policy disabled)
$ open http://localhost:3000/test.html
cd to the tremulajs directory then...
$ node r.js -o build.js; node r.js -o cssIn=src/Tremula.css out=dist/Tremula.css;node r.js -o build_min.js; node r.js -o cssIn=src/Tremula.css out=dist/Tremula.min.css optimizeCss=standard
- HammerJS (A most awesome touch event component)
- JsBezier (Thank you Simon Porritt !)
- jQuery (jQuery is a little overkill at this point -- It would be very straightforward to remove the few remaining convenience calls. For now, still required. John Resig, I salute you!)
iOS Safari, Chrome, OS X Safari, FF, IE (recent versions)