Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 6, 2015 15:35
Show Gist options
  • Save anonymous/0b4f909fda41fb84a109 to your computer and use it in GitHub Desktop.
Save anonymous/0b4f909fda41fb84a109 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
Raw
jsbin.danivahiwi.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;
}
Raw
jsbin.danivahiwi.js
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment