<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
* {margin:0; padding: 0;}
html, body {height:100%;}
.bgParallax {
font-family: 'Elsie', cursive;
color:#FFF;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
min-height: 100%;
text-shadow:0 0 10px rgba(0,0,0,0.7);
background-position: 50% 0;
background-repeat: repeat;
background-attachment: fixed;
}
/* Define backgrounds of divs */
#aboutus {background-image: url(img.jpg);}
#mission {
background-image: url(img2.jpg);
-webkit-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
-moz-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
-ms-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
-o-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
}
#name {background-image: url(img3.jpg);}
#mis {
background-image: url(img3.jpg);
-webkit-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
-moz-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
-ms-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
-o-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
}
.bgParallax article {
width: 70%;
text-align: center;
margin:0 auto;
padding:20% 0 0;
}
article h1 {font-size:40px;}
article p {line-height: 30px; font-size:20px; margin-top:15px;}
article p a {color:#FFF; text-decoration:none; font-size:30px;}
#nav {
list-style: none outside none;
position: fixed;
right: 20px;
top: 100px;
z-index: 99;
}
#nav li {
margin: 0 0 5px;
}
#nav li.active a {
background: none repeat scroll 0 0 #EC2028;
}
#nav li a {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 50px;
display: block;
font-size: 0;
height: 15px;
text-indent: -9999px;
width: 15px;
}
a {
color: #428BCA;
text-decoration: none;
}
</style>
<script type="text/javascript">
$('div.bgParallax').each(function(){
var $obj = $(this);
$(window).scroll(function() {
var yPos = -($(window).scrollTop() / $obj.data('speed'));
var bgpos = '50% '+ yPos + 'px';
$obj.css('background-position', bgpos );
});
});
</script>
<script>
$(document).ready(function(){
$( '.searchbychar' ).on('click', function(event) {
event.preventDefault();
var target = "#" + $(this).data('target');
//alert(target);
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
});
$(window).scroll(function() {
if ($(this).scrollTop() >= $('#aboutus').offset().top) {
$('#nav #a1').addClass('active');
$('#nav #a2 , #nav #a3 , #nav #a4').removeClass('active');
}
if ($(this).scrollTop() >= $('#mission').offset().top) {
$('#nav #a1 , #nav #a3 , #nav #a4').removeClass('active');
$('#nav #a2').addClass('active');
}
if ($(this).scrollTop() >= $('#name').offset().top) {
$('#nav #a2 , #nav #a1 , #nav #a4').removeClass('active');
$('#nav #a3').addClass('active');
}
if ($(this).scrollTop() >= $('#mis').offset().top) {
$('#nav #a2 , #nav #a1 , #nav #a3').removeClass('active');
$('#nav #a4').addClass('active');
}
});
</script>
<body>
<ul id="nav">
<li id="a1" class="active"><a class="searchbychar" href="#" data-target="aboutus" title="Next Section">first</a></li>
<li id="a2"><a class="searchbychar" href="#" data-target="mission" title="Next Section">second</a></li>
<li id="a3"> <a class="searchbychar" href="#" data-target="name" title="Next Section">third</a></li>
<li id="a4"> <a class="searchbychar" href="#" data-target="mis" title="Next Section">fourth</a></li>
</ul>
<div id="aboutus" class="bgParallax" data-speed="15">
<article>
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text the
1500s,. </p>
</article>
</div>
<div id="mission" class="bgParallax" data-speed="10">
<article>
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text the
1500s,. </p>
</article>
</div>
<div id="name" class="bgParallax" data-speed="15">
<article>
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text the
1500s,. </p>
</article>
</div>
<div id="mis" class="bgParallax" data-speed="10">
<article>
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text the
1500s,. </p>
</article>
</div>
</body>
</html>
