January 6, 2015 15:35 · Jan 6, 2015
diff --git a/index.html b/index.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>JS Bin</title>
+<style id="jsbin-css">
+#container {
+  background-color: red;
+  position: relative;
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+}
+
+#scrollcontainer {
+  overflow: scroll;  
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+#scrollpanel {
+  width: 10000px;
+  height: 100%;
+  visibility: hidden;
+}
+</style>
+</head>
+<body>
+  <div id="container">
+    <div id="scrollcontainer">
+      <div id="scrollpanel"></div>
+    </div>
+  </div>
+<script id="jsbin-javascript">
+function createPage(i) {
+  var canvas = document.createElement('canvas');
+  canvas.width = 300;
+  canvas.height = 400;
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'rgba(0,255,0,0.8)';
+  ctx.fillRect(0,0,canvas.width, canvas.height);
+  ctx.font = '100px serif';
+  ctx.fillStyle = 'blue';
+  ctx.fillText('' + i, 10, 200);
+
+  canvas.setAttribute('style', 'position: absolute; top:0px; left:0px;');
+  canvas.pageIndex = i;
+  return canvas;
+}
+
+var pageDistance = 320;
+var pageMoveInterval = 200;
+
+var c = document.getElementById('container');
+var sc = document.getElementById('scrollcontainer');
+var pages = [];
+for (var i = 0; i < 20; i++) {
+  pages[i] = createPage(i);
+  c.insertBefore(pages[i], sc);
+}
+
+function updateView() {
+  var x = sc.scrollLeft;
+  var pageOffset = Math.floor(x / pageDistance);
+console.log(pageOffset);  
+  var moveRatio = 1.0 - Math.min(1.0, (x - pageDistance * pageOffset) / pageMoveInterval);
+  var raise = moveRatio > 0.5 ? 1 - moveRatio : moveRatio;
+  for (var i = 0; i < pages.length; i++) {
+    var page = pages[i];
+    if (i < pageOffset) {
+      page.style.left = '0px';
+      page.style.top = '20px';
+      page.style.zIndex = 1;
+    } else if (i === pageOffset) {
+      page.style.left = Math.floor(moveRatio * pageDistance) + 'px';
+      page.style.top = 20 - Math.floor(Math.sqrt(raise) * 20) + 'px';
+      page.style.zIndex = 3;      
+    } else {
+      page.style.left = pageDistance + 'px';
+      page.style.top = '20px';
+      page.style.zIndex = i === pageOffset + 1 ? 2 : 0;
+    }
+  }
+}
+
+setTimeout(updateView);
+
+sc.addEventListener('scroll', updateView);
+</script>
+
+
+<script id="jsbin-source-css" type="text/css">#container {
+  background-color: red;
+  position: relative;
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+}
+
+#scrollcontainer {
+  overflow: scroll;  
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+#scrollpanel {
+  width: 10000px;
+  height: 100%;
+  visibility: hidden;
+}</script>
+
+<script id="jsbin-source-javascript" type="text/javascript">function createPage(i) {
+  var canvas = document.createElement('canvas');
+  canvas.width = 300;
+  canvas.height = 400;
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'rgba(0,255,0,0.8)';
+  ctx.fillRect(0,0,canvas.width, canvas.height);
+  ctx.font = '100px serif';
+  ctx.fillStyle = 'blue';
+  ctx.fillText('' + i, 10, 200);
+
+  canvas.setAttribute('style', 'position: absolute; top:0px; left:0px;');
+  canvas.pageIndex = i;
+  return canvas;
+}
+
+var pageDistance = 320;
+var pageMoveInterval = 200;
+
+var c = document.getElementById('container');
+var sc = document.getElementById('scrollcontainer');
+var pages = [];
+for (var i = 0; i < 20; i++) {
+  pages[i] = createPage(i);
+  c.insertBefore(pages[i], sc);
+}
+
+function updateView() {
+  var x = sc.scrollLeft;
+  var pageOffset = Math.floor(x / pageDistance);
+console.log(pageOffset);  
+  var moveRatio = 1.0 - Math.min(1.0, (x - pageDistance * pageOffset) / pageMoveInterval);
+  var raise = moveRatio > 0.5 ? 1 - moveRatio : moveRatio;
+  for (var i = 0; i < pages.length; i++) {
+    var page = pages[i];
+    if (i < pageOffset) {
+      page.style.left = '0px';
+      page.style.top = '20px';
+      page.style.zIndex = 1;
+    } else if (i === pageOffset) {
+      page.style.left = Math.floor(moveRatio * pageDistance) + 'px';
+      page.style.top = 20 - Math.floor(Math.sqrt(raise) * 20) + 'px';
+      page.style.zIndex = 3;      
+    } else {
+      page.style.left = pageDistance + 'px';
+      page.style.top = '20px';
+      page.style.zIndex = i === pageOffset + 1 ? 2 : 0;
+    }
+  }
+}
+
+setTimeout(updateView);
+
+sc.addEventListener('scroll', updateView);
+
+</script></body>
+</html>
diff --git a/jsbin.danivahiwi.css b/jsbin.danivahiwi.css
@@ -0,0 +1,23 @@
+#container {
+  background-color: red;
+  position: relative;
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+}
+
+#scrollcontainer {
+  overflow: scroll;  
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+#scrollpanel {
+  width: 10000px;
+  height: 100%;
+  visibility: hidden;
+}
diff --git a/jsbin.danivahiwi.js b/jsbin.danivahiwi.js
@@ -0,0 +1,54 @@
+function createPage(i) {
+  var canvas = document.createElement('canvas');
+  canvas.width = 300;
+  canvas.height = 400;
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'rgba(0,255,0,0.8)';
+  ctx.fillRect(0,0,canvas.width, canvas.height);
+  ctx.font = '100px serif';
+  ctx.fillStyle = 'blue';
+  ctx.fillText('' + i, 10, 200);
+
+  canvas.setAttribute('style', 'position: absolute; top:0px; left:0px;');
+  canvas.pageIndex = i;
+  return canvas;
+}
+
+var pageDistance = 320;
+var pageMoveInterval = 200;
+
+var c = document.getElementById('container');
+var sc = document.getElementById('scrollcontainer');
+var pages = [];
+for (var i = 0; i < 20; i++) {
+  pages[i] = createPage(i);
+  c.insertBefore(pages[i], sc);
+}
+
+function updateView() {
+  var x = sc.scrollLeft;
+  var pageOffset = Math.floor(x / pageDistance);
+console.log(pageOffset);  
+  var moveRatio = 1.0 - Math.min(1.0, (x - pageDistance * pageOffset) / pageMoveInterval);
+  var raise = moveRatio > 0.5 ? 1 - moveRatio : moveRatio;
+  for (var i = 0; i < pages.length; i++) {
+    var page = pages[i];
+    if (i < pageOffset) {
+      page.style.left = '0px';
+      page.style.top = '20px';
+      page.style.zIndex = 1;
+    } else if (i === pageOffset) {
+      page.style.left = Math.floor(moveRatio * pageDistance) + 'px';
+      page.style.top = 20 - Math.floor(Math.sqrt(raise) * 20) + 'px';
+      page.style.zIndex = 3;      
+    } else {
+      page.style.left = pageDistance + 'px';
+      page.style.top = '20px';
+      page.style.zIndex = i === pageOffset + 1 ? 2 : 0;
+    }
+  }
+}
+
+setTimeout(updateView);
+
+sc.addEventListener('scroll', updateView);