Bootstrap Snippet Parallax Single Page using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Parallax Single Page"
Bootstrap 3.2.0 Snippet by webdogz

Related: See More

Questions / Comments:

"Parallax Single Page" Bootstrap 3.2.0 Snippet by webdogz

Related: See More

Questions / Comments:

"Parallax Single Page"
Bootstrap 3.2.0 Snippet by webdogz