<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="navbar navbar-fixed-top alt" data-spy="affix" data-offset-top="1000">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Home</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="#group1">Section 1</a></li>
<li><a href="#group2">Section 2</a></li>
<li><a href="#group3">Section 3</a></li>
<li><a href="#group4">Section 4</a></li>
<li><a href="#group5">Section 5</a></li>
<li><a href="#group6">Section 6</a></li>
<li><a href="#group7">Section 7</a></li>
</ul>
</div>
</div>
</div>
<div class="parallax">
<div id="group1" class="parallax-group">
<div class="parallax-layer parallax-layer-base">
<div class="container">
<div class="jumbotron">
<h1>Group 1 Base Layer</h1>
<p class="lead">z-index: 5 will slide over group 2</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
<div id="group2" class="parallax-group">
<div class="parallax-layer parallax-layer-base">
<div class="container">
<div class="jumbotron">
<h1>Group 2 Base Layer</h1>
<p class="lead">z-index: 3 will slide under groups 1 and 3</p>
<p><a class="btn btn-success btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="parallax-layer parallax-layer-back">
<div class="title">Group 2 Background Layer</div>
</div>
</div>
<div id="group3" class="parallax-group">
<div class="parallax-layer parallax-layer-fore">
<div class="title">Group 3 Foreground Layer</div>
</div>
<div class="parallax-layer parallax-layer-base">
<div class="container">
<div class="jumbotron">
<h1>Group 3 Base Layer</h1>
<p class="lead">z-index: 4 will slide over group 2 and 4</p>
<p><a class="btn btn-success btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
<div id="group4" class="parallax-group">
<div class="parallax-layer parallax-layer-base">
<div class="container">
<div class="jumbotron">
<h1>Group 4 Base Layer</h1>
<p class="lead">z-index: 2 will slide under group 3 and 5</p>
<p><a class="btn btn-success btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="parallax-layer parallax-layer-back">
<div class="title">Group 4 Background Layer</div>
</div>
<div class="parallax-layer parallax-layer-deep">
<div class="title">Group 4 Deep Background Layer</div>
</div>
</div>
<div id="group5" class="parallax-group">
<div class="parallax-layer parallax-layer-fore">
<div class="title">Group 5 Foreground Layer</div>
</div>
<div class="parallax-layer parallax-layer-base">
<div class="container">
<div class="jumbotron">
<h1>Group 5 Base Layer</h1>
<p class="lead">z-index: 3 will slide over group 4 and 6</p>
<p><a class="btn btn-warning btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
<div id="group6" class="parallax-group">
<div class="parallax-layer parallax-layer-back">
<div class="title">Group 6 Background Layer</div>
</div>
<div class="parallax-layer parallax-layer-base">
<div class="container">
<div class="jumbotron">
<h1>Group 6 Base Layer</h1>
<p class="lead">z-index: 2 will slide under group 5 and 7</p>
<p><a class="btn btn-danger btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
<div id="group7" class="parallax-group">
<div class="parallax-layer parallax-layer-base">
<div class="container">
<div class="jumbotron">
<h1>Group 7 Base Layer</h1>
<p class="lead">z-index: 3 will slide over group 6</p>
<p><a class="btn btn-danger btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="parallax-layer parallax-layer-back">
<div class="title">Group 7 Background Layer</div>
</div>
<div class="parallax-layer parallax-layer-deep">
<div class="title">Group 7 Deep Background Layer</div>
</div>
<div class="parallax-layer parallax-layer-fore">
<div class="title">Group 7 Foreground Layer</div>
</div>
</div>
</div>
.navbar {
background: #e1e1e1;
}
.parallax {
font-size: 200%;
}
.parallax-group .container {
padding: 4% 1%;
}
.parallax-group .jumbotron {
background-color: rgba(255,255,255,.7);
}
/* centre the content in the parallax layers */
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: rgba(255,196,0,.7);
padding: 10px;
}
.parallax {
height: 500px; /* fallback for older browsers */
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
-moz-perspective: 300px;
-o-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
}
.parallax-group {
position: relative;
height: 500px; /* fallback for older browsers */
height: 100vh;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax-layer-fore {
-webkit-transform: translateZ(90px) scale(.7);
-moz-transform: translateZ(90px) scale(.7);
-o-transform: translateZ(90px) scale(.7);
-ms-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax-layer-base {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax-layer-back {
-webkit-transform: translateZ(-300px) scale(2);
-moz-transform: translateZ(-300px) scale(2);
-o-transform: translateZ(-300px) scale(2);
-ms-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax-layer-deep {
-webkit-transform: translateZ(-600px) scale(3);
-moz-transform: translateZ(-600px) scale(3);
-o-transform: translateZ(-600px) scale(3);
-ms-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
/* style the groups
--------------------------------------------- */
#group1 {
z-index: 5; /* slide over group 2 */
}
#group1 .parallax-layer-base {
background: #52b9e9;
}
#group2 {
z-index: 3; /* slide under groups 1 and 3 */
}
#group2 .parallax-layer-back {
background: #1171a3;
}
#group3 {
z-index: 4; /* slide over group 2 and 4 */
}
#group3 .parallax-layer-base {
background: #932ab6;
}
#group4 {
z-index: 2; /* slide under group 3 and 5 */
}
#group4 .parallax-layer-deep {
background: #fa3031;
}
#group5 {
z-index: 3; /* slide over group 4 and 6 */
}
#group5 .parallax-layer-base {
background: #f88529;
}
#group6 {
z-index: 2; /* slide under group 5 and 7 */
}
#group6 .parallax-layer-back {
background: #43c83c;
}
#group7 {
z-index: 3; /* slide over group 7 */
}
#group7 .parallax-layer-base {
background: rgb(255,241,100);
}
$(document).ready(function(){
var $scroller = $('html,body'),
// cache slides and their offset.top's
$slides = $('.parallax-group').each(function(idx){
var target = $(this);
target.data('y', target.offset().top);
console.log(target.data('y'));
}),
$scrollPrev = $('.scroll-prev'),
$scrollNext = $('.scroll-next'),
slideName = '#group';
$scrollPrev.click(function(e){
e.preventDefault();
scrollIt(-1);
});
$scrollNext.click(function(e){
e.preventDefault();
if (!$scrollNext.data('disabled'))
scrollIt(1);
});
$('a[href^="#"]').on('click', function(event) {
if (this.hash.replace(/\d+$/, '') === slideName) {
var target = $(this.hash);
if( target.length > 0 ) {
event.preventDefault();
scrollTop(parseInt(this.hash), target.offset().top);
}
}
});
$('body').scrollspy({ target: '#navbar', offset: 30 });
function scrollTop(idx, y) {
$scroller.animate({scrollTop:y},1000, function(){
if (idx >= $slides.length){
$scrollNext.find('a').animate({opacity:.1}, 500);
$scrollNext.data('disabled', true);
}else{
$scrollNext.find('a').animate({opacity:1}, 500);
$scrollNext.data('disabled', false);
}
});
}
function scrollIt(dir) {
var idx = getSlideIndex(dir),
slide = $(slideName+idx),
toPos = (slide.length > 0 && slide.offset().top)||0;
scrollTop(idx, toPos);
}
function getSlideIndex(dir) {
var pagePos = $(window).scrollTop(), prevTop = 0, currIdx = -1.
len = $slides.length;
for (var i = 1; i <= len; i++) {
var curr = $(slideName+i),
next = $(slideName+(i+1)),
prev = $(slideName+(i-1)),
nextPos = (next.length > 0 && next.offset().top),
prevPos = (prev.length > 0 && prev.offset().top),
currPos = curr.offset().top;
if (currIdx < 0) { // next
if (currPos >= pagePos && (
(nextPos && currPos <= nextPos) ||
(prevPos && currPos >= prevPos) ) ) {
currIdx = i;
break;
}
}
}
return currIdx + (dir||0)
}
});
