demobo-com/jsbin.untitled.html

## jsbin.untitled.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src='http://code.famo.us/lib/require.js'></script>
  <script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
  <link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
</head>
<body>

</body>
</html>

## jsbin.untitled.js
require([
      'famous/core/Engine',
      'famous/core/Surface',
      'famous/core/Modifier',
      'famous/core/Transform',
      'famous/views/Scrollview',
      'famous/modifiers/StateModifier',
      'famous/core/ViewSequence'
    ], function(Engine, Surface, Modifier,Transform,Scrollview,StateModifier,ViewSequence){
      var mainContext = Engine.createContext();
      mainContext.setPerspective(500);

var surfaces = [];
var scrollview = new Scrollview({
    margin: 180
});

Engine.pipe(scrollview);

var viewSequence = new ViewSequence({
    array: surfaces,
    loop: true
});
scrollview.sequenceFrom(viewSequence);

var size = [300, 100];

var centerModifier = new StateModifier({
    size: size,
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
});

mainContext.add(centerModifier).add(scrollview);

for (var i = 0; i < 40; i++) {
    var surface = new Surface({
        size: size,
        content: 'Surface ' + i,
        properties: {
            textAlign: 'center',
            lineHeight: '100px',
            color: 'white',
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            boxShadow: '0 0 15px rgba(0, 0, 0, 0.5)'
        }
    });

    surfaces.push(surface);
}

scrollview.outputFrom(function(offset) {
    return Transform.moveThen([0, -50, 350], Transform.rotateX(-0.004 * offset));
});
    });
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src='http://code.famo.us/lib/require.js'></script>
	<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
	<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
	</head>
	<body>

	</body>
	</html>
	require([
	'famous/core/Engine',
	'famous/core/Surface',
	'famous/core/Modifier',
	'famous/core/Transform',
	'famous/views/Scrollview',
	'famous/modifiers/StateModifier',
	'famous/core/ViewSequence'
	], function(Engine, Surface, Modifier,Transform,Scrollview,StateModifier,ViewSequence){
	var mainContext = Engine.createContext();
	mainContext.setPerspective(500);

	var surfaces = [];
	var scrollview = new Scrollview({
	margin: 180
	});

	Engine.pipe(scrollview);

	var viewSequence = new ViewSequence({
	array: surfaces,
	loop: true
	});
	scrollview.sequenceFrom(viewSequence);

	var size = [300, 100];

	var centerModifier = new StateModifier({
	size: size,
	origin: [0.5, 0.5],
	align: [0.5, 0.5]
	});

	mainContext.add(centerModifier).add(scrollview);

	for (var i = 0; i < 40; i++) {
	var surface = new Surface({
	size: size,
	content: 'Surface ' + i,
	properties: {
	textAlign: 'center',
	lineHeight: '100px',
	color: 'white',
	backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
	boxShadow: '0 0 15px rgba(0, 0, 0, 0.5)'
	}
	});

	surfaces.push(surface);
	}

	scrollview.outputFrom(function(offset) {
	return Transform.moveThen([0, -50, 350], Transform.rotateX(-0.004 * offset));
	});
	});