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.
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}} |
// 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) { |
var express = require('express') | |
,app = express() | |
,_ = require('underscore') | |
,util = require('util') | |
,os = require('os'); | |
var rootDir = __dirname + '/app' | |
,port = 3000; | |
{ | |
"name": "spaServer", | |
"description": "express app that serves index.html", | |
"version": "0.0.1", | |
"private": true, | |
"dependencies": { | |
"express": "3.x", | |
"underscore": "~1.6.0" | |
} | |
} |
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.
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... |
function stopwatch(label, resolution) { | |
if (resolution === undefined) { | |
resolution = 1; | |
} | |
if (!label) { | |
label = ''; | |
} | |
this.label = label; | |
this.isRunning = false; | |
this.lastLapTime = 0.0; |
{ | |
"id": "prod_test", | |
"viewports": [ | |
{ | |
"name": "phone", | |
"width": 320, | |
"height": 480 | |
}, | |
{ | |
"name": "tablet_v", |
> 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 |