Parallax Scroll Effect
HTML
<div class="parallax-wrapper"> <div class="shape shape01"> </div> <div class="shape shape02"> </div> <div class="shape shape03"> </div> <div class="shape shape04"> </div> <div class="shape shape05"> </div> <div class="shape shape06"> </div> <div class="shape shape07"> </div> <div class="shape shape08"> </div> <div class="top-shape top-shape01"> </div> <div class="top-shape top-shape02"> </div> <div class="top-shape top-shape03"> </div> <div class="parallax-logo"> </div> </div>
CSS
.parallax-wrapper {
position: relative;
height:4000px;
width: 100%;
overflow: hidden;
}
.parallax-logo {
position: absolute;
background-color:transparent;
width: 500px;
height:300px;
margin:auto;
}
.shape {
position: absolute;
width: 300px;
height:150px;
border:solid 3px;
}
.shape01 {
top:4%;
left:11%;
}
.shape02 {
top:50%;
left:-8%;
}
.shape03 {
top:125%;
left:40%;
}
.shape04 {
top: 103%;
left: 3%;
}
.shape05 {
top:65%;
left:70%;
}
.shape06 {
top:80%;
left:85%;
}
.shape07 {
top:15%;
left:55%;
}
.shape08 {
top:60%;
left:12%;
}
.top-shape {
position: absolute;
width:100%;
}
.top-shape01 {
top:30%;
left:26%;
}
.top-shape02 {
top:2%;
left:8%;
}
.top-shape03 {
top:15%;
left:70%;
}
JAVASCRIPT
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
$('.parallax-logo').css({
'transform' : 'translate(0px, '+ wScroll /16 +'%)'
});
$('.shape').css({
'transform' : 'translate(0px, -'+ wScroll /7 +'%)'
});
});
