Skip to content

Instantly share code, notes, and snippets.

@rjmoggach

rjmoggach/index.html

Created March 4, 2015 08:31
Show Gist options
  • Save rjmoggach/8a49523a90894c5ae56d to your computer and use it in GitHub Desktop.
Save rjmoggach/8a49523a90894c5ae56d to your computer and use it in GitHub Desktop.
Download ZIP
famo.us App Tree Famo.us 0.3.1 global-seed // source http://jsbin.com/fobaxo/1
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>famo.us App</title>
<meta name="description" content="Tree Famo.us 0.3.1 global-seed" />
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.1/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.3.1/famous-global.min.js"></script>
<!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<style id="jsbin-css">
html {
background-color: rgba(0,0,0,0.10);
color: #000;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
</style>
</head>
<body><script id="jsbin-javascript">
var Surface = famous.core.Surface;
var View = famous.core.View;
var Modifier = famous.core.Modifier;
var RenderNode = famous.core.RenderNode;
var StateModifier = famous.modifiers.StateModifier;
var Engine = famous.core.Engine;
var Transform = famous.core.Transform;
var Transitionable = famous.core.Transitionable;
var globalModifier = new Modifier({
size: [100, 100],
origin: [0, 0],
align: [0.5, 0.5],
transform: Transform.translate(0, 0, 0.0001)
});
var rootModifier = new Modifier({
size: [undefined, undefined],
origin: [0, 0],
align: [0, 0],
transform: Transform.translate(0, 0, 0.0001)
});
var blueModifier = new Modifier({
size: [100, 100],
origin: [0.5, 0.5],
align: [0, 0],
transform: Transform.translate(0, 0, 1)
});
var greenModifier = new Modifier({
size: [50, 50],
origin: [0, 0],
align: [0, 0],
transform: Transform.translate(0, 0, 2)
});
var redModifier = new Modifier({
size: [50, 50],
origin: [1, 1],
align: [0, 0],
transform: Transform.translate(0, 0, 2)
});
var blueSurface = new Surface({
content: 'blue',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
color: 'white',
textAlign: 'right',
backgroundColor: 'blue'
}
});
var redSurface = new Surface({
content: 'red',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
backgroundColor: 'red'
}
});
var greenSurface = new Surface({
content: 'green',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
backgroundColor: 'green'
}
});
var mainContext = Engine.createContext();
mainContext.setPerspective(10000);
var globalContext = mainContext.add(globalModifier);
var rootContext = globalContext.add(rootModifier);
rootContext.add(blueModifier).add(blueSurface);
rootContext.add(greenModifier).add(greenSurface);
rootContext.add(redModifier).add(redSurface);
function reset() {
rootModifier.setTransform(Transform.translate(0, 0, 0),
{duration: 1000});
}
function rotate(x, y) {
rootModifier.setTransform(Transform.rotate(x, y, 0),
{duration: 1000});
}
var resetButton = new Surface({
content: 'reset',
size: [100, 20],
classes: ['double-sided'],
properties: {
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.10)',
cursor: 'pointer'
}
});
var rotateButton = new Surface({
content: 'rotate',
size: [100, 20],
classes: ['double-sided'],
properties: {
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.10)',
cursor: 'pointer'
}
});
resetButton.on('click', function(e){
reset();
});
rotateButton.on('click', function(e){
rotate(e.x, e.y);
});
mainContext.add(new Modifier({transform: Transform.translate(120, 0, 0)})).add(resetButton);
mainContext.add(rotateButton);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE HTML>
<html>
<head>
<title>famo.us App</title>
<meta name="description" content="Tree Famo.us 0.3.1 global-seed" />
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<\!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"><\/script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"><\/script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"><\/script>
<\!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.1/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.3.1/famous-global.min.js"><\/script>
<\!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body></body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">html {
background-color: rgba(0,0,0,0.10);
color: #000;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var Surface = famous.core.Surface;
var View = famous.core.View;
var Modifier = famous.core.Modifier;
var RenderNode = famous.core.RenderNode;
var StateModifier = famous.modifiers.StateModifier;
var Engine = famous.core.Engine;
var Transform = famous.core.Transform;
var Transitionable = famous.core.Transitionable;
var globalModifier = new Modifier({
size: [100, 100],
origin: [0, 0],
align: [0.5, 0.5],
transform: Transform.translate(0, 0, 0.0001)
});
var rootModifier = new Modifier({
size: [undefined, undefined],
origin: [0, 0],
align: [0, 0],
transform: Transform.translate(0, 0, 0.0001)
});
var blueModifier = new Modifier({
size: [100, 100],
origin: [0.5, 0.5],
align: [0, 0],
transform: Transform.translate(0, 0, 1)
});
var greenModifier = new Modifier({
size: [50, 50],
origin: [0, 0],
align: [0, 0],
transform: Transform.translate(0, 0, 2)
});
var redModifier = new Modifier({
size: [50, 50],
origin: [1, 1],
align: [0, 0],
transform: Transform.translate(0, 0, 2)
});
var blueSurface = new Surface({
content: 'blue',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
color: 'white',
textAlign: 'right',
backgroundColor: 'blue'
}
});
var redSurface = new Surface({
content: 'red',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
backgroundColor: 'red'
}
});
var greenSurface = new Surface({
content: 'green',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
backgroundColor: 'green'
}
});
var mainContext = Engine.createContext();
mainContext.setPerspective(10000);
var globalContext = mainContext.add(globalModifier);
var rootContext = globalContext.add(rootModifier);
rootContext.add(blueModifier).add(blueSurface);
rootContext.add(greenModifier).add(greenSurface);
rootContext.add(redModifier).add(redSurface);
function reset() {
rootModifier.setTransform(Transform.translate(0, 0, 0),
{duration: 1000});
}
function rotate(x, y) {
rootModifier.setTransform(Transform.rotate(x, y, 0),
{duration: 1000});
}
var resetButton = new Surface({
content: 'reset',
size: [100, 20],
classes: ['double-sided'],
properties: {
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.10)',
cursor: 'pointer'
}
});
var rotateButton = new Surface({
content: 'rotate',
size: [100, 20],
classes: ['double-sided'],
properties: {
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.10)',
cursor: 'pointer'
}
});
resetButton.on('click', function(e){
reset();
});
rotateButton.on('click', function(e){
rotate(e.x, e.y);
});
mainContext.add(new Modifier({transform: Transform.translate(120, 0, 0)})).add(resetButton);
mainContext.add(rotateButton);
</script></body>
</html>
Raw
jsbin.fobaxo.css
html {
background-color: rgba(0,0,0,0.10);
color: #000;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
Raw
jsbin.fobaxo.js
var Surface = famous.core.Surface;
var View = famous.core.View;
var Modifier = famous.core.Modifier;
var RenderNode = famous.core.RenderNode;
var StateModifier = famous.modifiers.StateModifier;
var Engine = famous.core.Engine;
var Transform = famous.core.Transform;
var Transitionable = famous.core.Transitionable;
var globalModifier = new Modifier({
size: [100, 100],
origin: [0, 0],
align: [0.5, 0.5],
transform: Transform.translate(0, 0, 0.0001)
});
var rootModifier = new Modifier({
size: [undefined, undefined],
origin: [0, 0],
align: [0, 0],
transform: Transform.translate(0, 0, 0.0001)
});
var blueModifier = new Modifier({
size: [100, 100],
origin: [0.5, 0.5],
align: [0, 0],
transform: Transform.translate(0, 0, 1)
});
var greenModifier = new Modifier({
size: [50, 50],
origin: [0, 0],
align: [0, 0],
transform: Transform.translate(0, 0, 2)
});
var redModifier = new Modifier({
size: [50, 50],
origin: [1, 1],
align: [0, 0],
transform: Transform.translate(0, 0, 2)
});
var blueSurface = new Surface({
content: 'blue',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
color: 'white',
textAlign: 'right',
backgroundColor: 'blue'
}
});
var redSurface = new Surface({
content: 'red',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
backgroundColor: 'red'
}
});
var greenSurface = new Surface({
content: 'green',
size: [undefined, undefined],
classes: ['double-sided'],
properties: {
backgroundColor: 'green'
}
});
var mainContext = Engine.createContext();
mainContext.setPerspective(10000);
var globalContext = mainContext.add(globalModifier);
var rootContext = globalContext.add(rootModifier);
rootContext.add(blueModifier).add(blueSurface);
rootContext.add(greenModifier).add(greenSurface);
rootContext.add(redModifier).add(redSurface);
function reset() {
rootModifier.setTransform(Transform.translate(0, 0, 0),
{duration: 1000});
}
function rotate(x, y) {
rootModifier.setTransform(Transform.rotate(x, y, 0),
{duration: 1000});
}
var resetButton = new Surface({
content: 'reset',
size: [100, 20],
classes: ['double-sided'],
properties: {
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.10)',
cursor: 'pointer'
}
});
var rotateButton = new Surface({
content: 'rotate',
size: [100, 20],
classes: ['double-sided'],
properties: {
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.10)',
cursor: 'pointer'
}
});
resetButton.on('click', function(e){
reset();
});
rotateButton.on('click', function(e){
rotate(e.x, e.y);
});
mainContext.add(new Modifier({transform: Transform.translate(120, 0, 0)})).add(resetButton);
mainContext.add(rotateButton);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment