Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

114 lines (94 sloc) 2.046 kb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Snapping</title>
<style>
html, body {
padding:0;
margin:0;
width:100%;
height:100%;
}
body {
overflow:auto;
}
h1 {
margin:0;
padding:0;
padding-top:2em;
font-family:sans-serif;
color:#fff;
}
div {
width:100%;
height:100%;
background:#09f;
text-align:center;
}
.odd {
background:#f90;
}
</style>
</head>
<body style="text-align:center;">
<div id="start">
<h1>The different parts of this webpage will snap after you scroll</h1>
</div>
<div class="odd" id="a">
<h1>A</h1>
</div>
<div id="b">
<h1>B</h1>
</div>
<div class="odd" id="c">
<h1>C</h1>
</div>
<div id="d">
<h1>D</h1>
</div>
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
<script type="text/javascript">
var layers = document.getElementsByTagName('div');
var activeLayer = 0;
var animateUpSettings = {
duration: 200,
done: function() {
document.body.style.overflow = 'auto';
}
};
var animateDownSettings = {
duration: 2000,
easing: 'sqrt',
done: animateUpSettings.done
};
var s = skrollr.init({
render: function(info) {
if(this.isAnimatingTo()) {
return;
}
var lastOffset = this.relativeToAbsolute(layers[activeLayer], 'top', 'top');
if(this.getScrollTop() === lastOffset) {
return;
}
document.body.style.overflow = 'hidden';
//Make sure to start animating at the last snap pos
this.setScrollTop(lastOffset);
if(info.direction === 'down') {
if(activeLayer + 1 < layers.length) {
activeLayer++;
var offset = this.relativeToAbsolute(layers[activeLayer], 'top', 'top');
//Move down slow with nice easing
this.animateTo(offset, animateDownSettings);
}
} else if(activeLayer > 0) {
activeLayer--;
var offset = this.relativeToAbsolute(layers[activeLayer], 'top', 'top');
//Move up very fast
this.animateTo(offset, animateUpSettings);
}
}
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.