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.
This Pen allows you to experiment using different config file settings.
| > cd test/configs/; node ../../cli/index.js test --config=backstop_features | |
| BackstopJS v3.0.38 | |
| Loading config: /Users/gshipon/Development/BackstopJS/test/configs/backstop_features | |
| COMMAND | Executing core for `test` | |
| createBitmaps | Selected 18 of 18 scenarios. | |
| Starting Chromy: {"chromeFlags":["--disable-gpu","--force-device-scale-factor=1","--disable-infobars=true","--window-size=320,480"],"port":9222,"waitTimeout":30000,"visible":false} | |
| Cookie state restored with: [] | |
| SCENARIO > Simple |
| { | |
| "id": "prod_test", | |
| "viewports": [ | |
| { | |
| "name": "phone", | |
| "width": 320, | |
| "height": 480 | |
| }, | |
| { | |
| "name": "tablet_v", |
| function stopwatch(label, resolution) { | |
| if (resolution === undefined) { | |
| resolution = 1; | |
| } | |
| if (!label) { | |
| label = ''; | |
| } | |
| this.label = label; | |
| this.isRunning = false; | |
| this.lastLapTime = 0.0; |
| Modify `./boilerplate/index.html` | |
| Look at line 81 where we initialize tremulajs... | |
| ``` | |
| $(document).ready(function(){ | |
| setTimeout(function(){ | |
| window.tremula = tremulaInit();//does not need to be on the window -- implemented here for convienience. | |
| loadFlickr(); // <=== replace this line with the block below... |
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.
This Pen allows you to experiment using different config file settings.
| { | |
| "name": "spaServer", | |
| "description": "express app that serves index.html", | |
| "version": "0.0.1", | |
| "private": true, | |
| "dependencies": { | |
| "express": "3.x", | |
| "underscore": "~1.6.0" | |
| } | |
| } |
| var express = require('express') | |
| ,app = express() | |
| ,_ = require('underscore') | |
| ,util = require('util') | |
| ,os = require('os'); | |
| var rootDir = __dirname + '/app' | |
| ,port = 3000; | |
| // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
| // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
| // requestAnimationFrame polyfill by Erik Möller | |
| // fixes from Paul Irish and Tino Zijdel | |
| (function() { | |
| var lastTime = 0; | |
| var vendors = ['ms', 'moz', 'webkit', 'o']; | |
| for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { |
| Choose a ticket class: <select id="tickets"></select> | |
| <p id="ticketOutput"></p> | |
| <script id="ticketTemplate" type="text/x-jquery-tmpl"> | |
| {{if chosenTicket}} | |
| You have chosen <b>${ chosenTicket().name }</b> | |
| ($${ chosenTicket().price }) | |
| <button data-bind="click: resetTicket">Clear</button> | |
| {{/if}} |