WEBSITE - HOME PAGE PARALLAX TO NEXT PAGE USING BACKSTRETCH PLUGIN - BIZAMAJIG THEME USAGE

by hanna314

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
  <div class="intro">
		<div class="intro-content">
			<div class="line"><span>Xexode Development</span></div>
				<div class="stretch">
					<h1>Elegant<br>One Page</h1>
				</div>
			<div class="line"><span>Elegant One Page Template</span></div>
		</div>
  </div>
	<div class="navigation-anchor"></div>
	<div class="navigation">
		<ul>
			<li><a href="" class="active">Elegant</a></li>
			<div class="right">
				<li><a href="#home">Home</a></li>
				<li><a href="#2">Content Two</a></li>
				<li><a href="#3">Content Three</a></li>
			</div>
		</ul>
	</div>
  <div class="content">
		<div class="center">
			<div id="home">
				test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			</div>
			<div id="2">
				test 2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			</div>
			<div id="3">
				test 3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			</div>
		</div>
  </div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);


body, html{
	height: 100%;
	width: 100%;
	color: #ffffff;
  xxoverflow-x: hidden;
	margin: 0;
	padding: 0;
}

/* Introduction */
.intro{
  height: 100%;
	width: 100%;		
}
.intro .intro-content{
	color: #222;
	font-family: 'Raleway', sans-serif;
	z-index:-1;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -130px;
	height: 260px;
	width: 800px;
	margin-left: -400px;
	text-align:center;
	font-size: 17px;
	letter-spacing: 1px;
}
.intro .intro-content div span {
  display: inline-block;
  text-transform: uppercase;
	color: #fff;
}
.line {
  text-align: center;
  display: table;
  width: 500px;
	margin-left:150px;
}
.line h2 > span, .line:before, .line:after {
  display: table-cell;
}
.line:before, .line:after {
  background: url("../images/header.png") repeat-x center;
  width: 50%;
  content: ' ';
}
.line > span {
    white-space: nowrap;
    padding: 0 9px;
}
.intro .intro-content h1 {
  font-size: 110px;
	line-height: 100px;
	letter-spacing: -3px;
	font-weight: 400;
	color: #fff;
	text-transform:uppercase;
	margin:-10px;
}

/* Navigation */
.navigation {
	display: table;
	overflow: hidden;
	height: 45px;
	color: #999999;
	width: 100%;
	background: #ffffff;
	-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
	-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
	box-shadow:0 1px 10px rgba(0,0,0,.1);
	position: relative;
	padding:0;
	margin:0;
}
.navigation ul {
	display: table-cell;
	vertical-align: middle;
	list-style-type: none;
	text-align: left;
	margin: 0;
	padding: 0;
	width: 100%;
	padding-left:10px;
	padding-right:10px;
}
.navigation ul li {
	text-decoration: none;
	display: inline-block;
}
.navigation ul li a{
	text-transform: uppercase;
	font-weight: 400;
	font-size: 20px;
	color: #999999;
	display: block;
	height: 100%;
	transition: all 0.3s ease-out 0s;
	line-height: 25px;
	text-shadow: none;
	margin-left:10px;
	font-family: 'Raleway', sans-serif;
}
.navigation ul li .active, .navigation ul li...

JavaScript

function navigation(){
	var window_top = $(window).scrollTop();
	var div_top = $('.navigation-anchor').offset().top;
	if (window_top > div_top) {
		$('.navigation').css('top', window_top - div_top);
		$('.content').addClass("padding");
	} else {
		$('.navigation').css('top', '0px');
		$('.content').removeClass("padding");
	}

}

//Placed at bottom of functions
$(document).ready(function() {
	$.backstretch([
		"http://fc03.deviantart.net/fs71/f/2012/137/c/0/hd_wallpaper___minecraft_jungle_by_popliop-d5049ci.png", 
		"http://www.ipadniks.com/wallpaper/anime-minecraft-fondos-pantallas-imagenes_261228.jpg", 
		"http://th01.deviantart.net/fs71/PRE/f/2012/362/a/1/minecraft_woodenfloor_wallpaper_by_lpzdesign-d5phzax.jpg"
	], {duration: 3000, fade: 750});
	$('body').scroll(navigation);
  navigation();	
	var $root = $('html, body');
	$('a').click(function() {
			$root.animate({
					scrollTop: $( $(this).attr('href') ).offset().top
			}, 500);
			return false;
	});
});