Skip to content

Instantly share code, notes, and snippets.

@abusedmedia
Last active March 10, 2016 11:48
Show Gist options
  • Select an option

  • Save abusedmedia/e38a592b3a7c03060157 to your computer and use it in GitHub Desktop.

Select an option

Save abusedmedia/e38a592b3a7c03060157 to your computer and use it in GitHub Desktop.
Scoll list component with clip and momentum

Scoll list component with clip and momentum

More info about the bundle here

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="prototypon">
<link rel="stylesheet" type="text/css" href="//prototypon.firebaseapp.com/css/bundle.css" />
<script src="//prototypon.firebaseapp.com/js/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="proto.css" />
<script src="proto.js"></script>
</head>
<body class="mobileready">
</body>
</html>
var svg_path = "ui.svg"
Proto.placeSVG(svg_path, init)
function init() {
Proto.coach('#coach')
Proto.clip('#component_list', '#mask_list')
var content = d3.select('#content')
Proto.Impetus({
source: '#content',
boundY: [-404, 0], // (content.height - mask.height) * -1
update: function(x, y){
content.attr('transform', 'translate(0, '+y+')')
}
})
}
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment