Untitled

<html>
	<head>
		<title>Boost Your Elo</title>
		<style>
			html,body{
				height:100%;
				width:100%;
				margin:0;
				padding:0;
			}
			section{
				position:relative;
				height:100%;
				width:100%;
			}
			section:nth-child(1){
			   background:lightblue;
			}
			section:nth-child(2){
			   background:lightgreen;
			}
			section:nth-child(3){
			   background:purple;
			}
			section:nth-child(4){
			   background:red;
			}
			section:nth-child(5){
			   background:yellow;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
      <script type='text/javascript' src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
      <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>

		<script>
			$(document).ready(function()
			{
				$('body').mousewheel(function(event, delta) {
					var $current = $('section.inview');

					if (delta > 0) {
						$prev = $current.prev();

						if ($prev.length) {
							$('body').scrollTo($prev, 500);
							$current.removeClass('inview');
							$prev.addClass('inview');
						}
					} else {
						$next = $current.next();

						if ($next.length) {
							$('body').scrollTo($next, 500);
							$current.removeClass('inview');
							$next.addClass('inview');
						}
					}

					event.preventDefault();
				});
			});
		</script>
	</head>
	<body>
		<section id="about" class="inview">
			abc
		</section>
		<section>
			def
		</section>
		<section>
			ghi
		</section>
		<section>
			jkl
		</section>
	</body>
</html>