Bootstrap Snippet parallax using HTML CSS Javascript

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<html>
<head>
</head>
<body>
  <div id="parallax-bg-3" class="parallax-bg">
        <div id="bg-3-1"></div>
        <div id="bg-3-2"></div>
        <div id="bg-3-3"></div>
        <div id="bg-3-4"></div>
    </div>
    <div id="parallax-bg-2" class="parallax-bg">
        <div id="bg-2-1"></div>
        <div id="bg-2-2"></div>
        <div id="bg-2-3"></div> 
        <div id="bg-2-4"></div>
        <div id="bg-2-5"></div>
        <div id="bg-2-6"></div>
    </div>
    <div id="parallax-bg-1" class="parallax-bg">
        <div id="bg-1-1"></div>
        <div id="bg-1-2"></div>
        <div id="bg-1-3"></div>
        <div id="bg-1-4"></div>
        <div id="bg-1-5"></div>
    </div>
    
    </body>
</html>
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
body{
  background:rgba(230,231,232,1);
    height:4600px;
}   
/* foreground (balloons/landscape)*/
div#parallax-bg-1{
    position: fixed;
    width: 1200px;
    top: 0;
    left: 50%; 
    margin-left: -600px; 
    z-index: 1;
}
/* background middle layer*/
div#parallax-bg-2{
    position: fixed;
    width: 1200px;
    top: 0;
    left: 50%; 
    margin-left: -600px; 
    z-index: 2;
}
/* background layer */
div#parallax-bg-3{
    position: fixed;
    width: 960px;
    top: 0;
    left: 50%; 
    margin-left: -470px; 
    z-index: 3;
}
/* foreground */
div#parallax-bg-3 div{
    background-repeat:no-repeat;
    position:absolute;
    display:block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 /* 
See https://codepen.io/MarcelSchulz/full/lCvwq
The effect doens't appear as nice when viewing in split view :-)
Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax).
*/
jQuery(document).ready(function(){
  $(window).scroll(function(e){
    parallaxScroll();
    });
     
    function parallaxScroll(){
        var scrolled = $(window).scrollTop();
        $('#parallax-bg-1').css('top',(0-(scrolled*.25))+'px');
        $('#parallax-bg-2').css('top',(0-(scrolled*.4))+'px');
        $('#parallax-bg-3').css('top',(0-(scrolled*.75))+'px');
    }
 
 }); 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"parallax"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"parallax" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"parallax"
Bootstrap 3.0.0 Snippet by evarevirus