examples/snapping.html

<!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>