index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is parallax scrolling</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link rel="stylesheet" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/parallax.js"></script>
</head>
<body>
<div id="big-wrapper">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Programs</a>
<ul class="dropup">
<li><a href="#">SQL Server</a></li>
<li><a href="#">Windows Server</a></li>
<li><a href="#">.NET Programming</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul class="dropup">
<li><a href="#">Visa processing</a></li>
<li><a href="#">University admission</a></li>
<li><a href="#">Company formation</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<ul class="parallax">
<li>
<div class="parallax-background beach"></div>
<div class="parallaxContent">
<h1>Sample content</h1>
<h2>Hey there</h2>
</div>
<div class="parallaxContent2">
<img class="sunset" src="images/sunset.png" title="sunset"/>
</div>
</li>
<li>
<div class="parallax-background flower"></div>
<div class="parallaxContent">
<h1>Sample content</h1>
<h2>Hey there</h2>
</div>
</li>
<li>
<div class="parallax-background lens"></div>
<div class="parallaxContent">
<h1>Sample content</h1>
<h2>Hey there</h2>
</div>
</li>
<li>
<div class="parallax-background wolf"></div>
<div class="parallaxContent">
<h1>Sample content</h1>
<h2>Hey there</h2>
</div>
</li>
</ul>
</body>
</html>
style.css file
body
{
margin:0;
padding:0;
width:100%;
height:100%;
}
ul
{
margin:0;
padding:0;
}
/*glass menu*/
#big-wrapper
{
max-width:1000px;
width:100%;
margin:0px auto;
text-align:left;
}
nav
{
-webkit-box-sizing:border-box;
width:1000px;
position:fixed;
z-index:99;
margin:0 auto;
padding:0px;
top:0;
text-shadow:1px 1px 1px black;
border-top:1px solid rgba(0,0,0,0.3);
background:rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0 -1px rgba(255,255,255,0.3);
-webkit-box-shadow:inset 0 -10px rgba(255,255,255,0.25);
-webkit-box-shadow:inset 0 -10px 20px rgba(255,255,255,0.25);
-webkit-box-shadow:inset 0 15px -30px rgba(0,0,0,0.3);
}
nav li
{
list-style:none;
display:inline-block;
padding:10px;
}
nav li a
{
color:#aaaaaa;
text-decoration:none;
}
nav li a:hover
{
color:white;
}
/*programs menu drop box*/
nav li ul.dropup
{
display:none;
}
nav li:hover ul.dropup
{
display:block;
position:absolute;
margin:0 0 0 -15px;
top:40px;
border:1px solid #111111;
border-top:none;
background:rgba(0,0,0,0.5);
-webkit-border-radius:0 0 5px 5px;
}
li:hover li{
display:block;
border-bottom:1px solid black;
}
/*parallax scrolling*/
.parallax li
{
/*list is the window*/
list-style:none;
overflow:hidden;
min-height:500px;
height:500px;
position:relative;
}
.parallax-background
{
/*list is the background of the window - we can earth what we see through window*/
/*height:90vh;*/
min-height:700px;
background-size:cover;
}
ul li .parallaxContent
{
text-align:center;
position:absolute;
top:40%;
left:30%;
color:white;
}
ul li .parallaxContent2
{
text-align:center;
position:absolute;
top:71%;
left:80%;
color:white;
}
h1
{
font-size:50px;
}
.flower
{
background-image:url('Images/flower.jpg');
background-position:50% 50%;
}
.lens
{
background-image:url('Images/lens.jpg');
background-size:cover;
}
.beach
{
background-image:url('Images/beach.jpg');
background-position:50% 70%;
}
.wolf
{
background-image:url('Images/wolf.jpg');
background-position:30% 60%;
}
.sunset
{
width:100px;
}
parallax.js file
$(window).load(function () {
//set the height of parallax window to screen height
(function () {
var sHeight = screen.height+500;
$(".parallax li").height(sHeight*.7);
$(".parallax-background").height(sHeight);
/*var x = $(".parallax-background");
console.log("innerHeight: " + window.innerHeight);
console.log("height:"+$(window).height());
console.log("screen:"+screen.height);*/
})();
//parallax scrolling effect anonymous function
(function ($) {
//reference to container
var $container = $(".parallax");
var $divs = $container.find("div.parallax-background");
var thingBeingScrolled = document.body;//here body is being scrolled
var liHeight = $divs.eq(0).closest("li").height();
var diffHeight = $divs.eq(0).height() - liHeight;
var len = $divs.length;
var i, div, offset, scroll, top, transform;
//calculate offset of individual div (background-element) and keep it in the array
var offsets = [];
$divs.each(function (i) {
offsets[i] = $(this).offset();
});
//render as variable function
var render = function () {
top = thingBeingScrolled.scrollTop;
for (i = 0; i < len; i++) {
//get one div
div = $divs[i];
//calculate the offset of the DIV
offset = top - offsets[i].top;
console.log(offset);
//calculate the amount to scroll
scroll = Math.round(((offset) / liHeight) * diffHeight);
//apply the scroll amount
transform = "translate3d(0px," + scroll + "px,0px)";
div.style.webkitTransform = transform;
div.style.MozTransform = transform;
div.style.msTransform = transform;
div.style.OTransform = transform;
div.style.transform = transform;
}
};
//function loop - self executing function
(function loop() {
requestAnimationFrame(loop);
render();
})();
//code for all browsers, requestAnimationFrame from Paul Irish
(function () {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}());
})(jQuery);
});
