Created
March 4, 2015 08:02
-
-
Save rjmoggach/f1064b5e5913882ba345 to your computer and use it in GitHub Desktop.
Famous App Transitionable Size Famo.us 0.3.5 // source http://jsbin.com/ruboju
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="Transitionable Size Famo.us 0.3.5" /> | |
<meta charset="utf-8"> | |
<title>Famous App</title> | |
<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" /> | |
<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.4/famous.css" /> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script> | |
<script type="text/javascript" src="http://code.famo.us/famous/0.3.5/famous.min.js"></script> | |
<script type="text/javascript">require(['main']);console.log('------------start------------')</script> | |
<style id="jsbin-css"> | |
html { | |
background: #fff; | |
} | |
.double-sided { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
} | |
.double-font { | |
font-size: 2em; | |
} | |
</style> | |
</head> | |
<body class='famous-root'> | |
<script id="jsbin-javascript"> | |
define('main', function (require, exports, module) { | |
var Engine = require('famous/core/Engine'); | |
var OptionsManager = require('famous/core/OptionsManager'); | |
var Surface = require('famous/core/Surface'); | |
var Modifier = require('famous/core/Modifier'); | |
var RenderNode = require('famous/core/RenderNode'); | |
var Transform = require('famous/core/Transform'); | |
var Transitionable = require("famous/transitions/Transitionable"); | |
var mainContext = Engine.createContext(); | |
mainContext.setPerspective(1000); | |
var surface = new Surface({ | |
content: 'Famo.us Application', | |
properties: { | |
backgroundColor: 'Yellow' | |
} | |
}); | |
//set the initial value of the transtionable to the left side of the screen | |
var maxOffset = 100; | |
//create our transitionable | |
var transitionable = new Transitionable(maxOffset*2); | |
function _sizer() { | |
return [transitionable.get(),transitionable.get()]; | |
} | |
var modifier = new Modifier({ | |
origin: [0.5, 0.5], | |
align: [0.5, 0.5] | |
}); | |
modifier.sizeFrom(_sizer); | |
mainContext.add(modifier).add(surface); | |
surface.on('click', function(){ | |
if (!surface.big) | |
transitionable.set(maxOffset, {duration: 1000}); | |
else | |
transitionable.set(maxOffset*4, {duration: 1000}); | |
surface.big = !surface.big; | |
}); | |
// Attribution :) | |
var desc = new Surface({ | |
content:'<a href="http://stackoverflow.com/users/2597114/talves"><img src="http://stackoverflow.com/users/flair/2597114.png" width="208" height="58" alt="profile for talves at Stack Overflow" title="profile for talves at Stack Overflow"></a>', | |
classes: ['double-sided', 'double-font'], | |
properties: { | |
textAlign: 'center', | |
lineHeight: '80px' | |
} | |
}); | |
desc._mod = new Modifier({ | |
size: [200, 20], | |
align: [0.5, 1], | |
origin: [0, 0], | |
transform: Transform.translate(-100, -100, 0) | |
}); | |
mainContext.add(desc._mod).add(desc); | |
}); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="Transitionable Size Famo.us 0.3.5" /> | |
<meta charset="utf-8"> | |
<title>Famous App</title> | |
<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" /> | |
<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.4/famous.css" /> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"><\/script> | |
<script type="text/javascript" src="http://code.famo.us/famous/0.3.5/famous.min.js"><\/script> | |
<script type="text/javascript">require(['main']);console.log('------------start------------')<\/script> | |
</head> | |
<body class='famous-root'> | |
</body> | |
</html></script> | |
<script id="jsbin-source-css" type="text/css">html { | |
background: #fff; | |
} | |
.double-sided { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
} | |
.double-font { | |
font-size: 2em; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">define('main', function (require, exports, module) { | |
var Engine = require('famous/core/Engine'); | |
var OptionsManager = require('famous/core/OptionsManager'); | |
var Surface = require('famous/core/Surface'); | |
var Modifier = require('famous/core/Modifier'); | |
var RenderNode = require('famous/core/RenderNode'); | |
var Transform = require('famous/core/Transform'); | |
var Transitionable = require("famous/transitions/Transitionable"); | |
var mainContext = Engine.createContext(); | |
mainContext.setPerspective(1000); | |
var surface = new Surface({ | |
content: 'Famo.us Application', | |
properties: { | |
backgroundColor: 'Yellow' | |
} | |
}); | |
//set the initial value of the transtionable to the left side of the screen | |
var maxOffset = 100; | |
//create our transitionable | |
var transitionable = new Transitionable(maxOffset*2); | |
function _sizer() { | |
return [transitionable.get(),transitionable.get()]; | |
} | |
var modifier = new Modifier({ | |
origin: [0.5, 0.5], | |
align: [0.5, 0.5] | |
}); | |
modifier.sizeFrom(_sizer); | |
mainContext.add(modifier).add(surface); | |
surface.on('click', function(){ | |
if (!surface.big) | |
transitionable.set(maxOffset, {duration: 1000}); | |
else | |
transitionable.set(maxOffset*4, {duration: 1000}); | |
surface.big = !surface.big; | |
}); | |
// Attribution :) | |
var desc = new Surface({ | |
content:'<a href="http://stackoverflow.com/users/2597114/talves"><img src="http://stackoverflow.com/users/flair/2597114.png" width="208" height="58" alt="profile for talves at Stack Overflow" title="profile for talves at Stack Overflow"></a>', | |
classes: ['double-sided', 'double-font'], | |
properties: { | |
textAlign: 'center', | |
lineHeight: '80px' | |
} | |
}); | |
desc._mod = new Modifier({ | |
size: [200, 20], | |
align: [0.5, 1], | |
origin: [0, 0], | |
transform: Transform.translate(-100, -100, 0) | |
}); | |
mainContext.add(desc._mod).add(desc); | |
}); | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
background: #fff; | |
} | |
.double-sided { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
} | |
.double-font { | |
font-size: 2em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define('main', function (require, exports, module) { | |
var Engine = require('famous/core/Engine'); | |
var OptionsManager = require('famous/core/OptionsManager'); | |
var Surface = require('famous/core/Surface'); | |
var Modifier = require('famous/core/Modifier'); | |
var RenderNode = require('famous/core/RenderNode'); | |
var Transform = require('famous/core/Transform'); | |
var Transitionable = require("famous/transitions/Transitionable"); | |
var mainContext = Engine.createContext(); | |
mainContext.setPerspective(1000); | |
var surface = new Surface({ | |
content: 'Famo.us Application', | |
properties: { | |
backgroundColor: 'Yellow' | |
} | |
}); | |
//set the initial value of the transtionable to the left side of the screen | |
var maxOffset = 100; | |
//create our transitionable | |
var transitionable = new Transitionable(maxOffset*2); | |
function _sizer() { | |
return [transitionable.get(),transitionable.get()]; | |
} | |
var modifier = new Modifier({ | |
origin: [0.5, 0.5], | |
align: [0.5, 0.5] | |
}); | |
modifier.sizeFrom(_sizer); | |
mainContext.add(modifier).add(surface); | |
surface.on('click', function(){ | |
if (!surface.big) | |
transitionable.set(maxOffset, {duration: 1000}); | |
else | |
transitionable.set(maxOffset*4, {duration: 1000}); | |
surface.big = !surface.big; | |
}); | |
// Attribution :) | |
var desc = new Surface({ | |
content:'<a href="http://stackoverflow.com/users/2597114/talves"><img src="http://stackoverflow.com/users/flair/2597114.png" width="208" height="58" alt="profile for talves at Stack Overflow" title="profile for talves at Stack Overflow"></a>', | |
classes: ['double-sided', 'double-font'], | |
properties: { | |
textAlign: 'center', | |
lineHeight: '80px' | |
} | |
}); | |
desc._mod = new Modifier({ | |
size: [200, 20], | |
align: [0.5, 1], | |
origin: [0, 0], | |
transform: Transform.translate(-100, -100, 0) | |
}); | |
mainContext.add(desc._mod).add(desc); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment