Vince Mamba Vince Mamba - 2 months ago 16
jQuery Question

Bootstrap Parallax Speed

Is there a way to change the speed of the parallax effect? As of right now, the way I have it set up is, the bottom of the image shows and as you scroll the image scrolls up as well. However if I want it, so on initial load, the image loads in the center and as you scroll up and down the page then the parallax image only moves up and down about 50px. So in the example I created below I would like the family's face to be in the center on load and as I scroll up and down only show maybe 50px about the heads and 50px below what is showing on initial load.

Here is what I have

#wrapper3 {
background-image: url('http://www.geneva.edu/blog/_assets/shutterstock_261648890%20-%20Child%20and%20Family%20Services.jpg');
background-attachment: fixed;
min-height: 350px;
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
display: block;

}


Here is my JSFiddle

Tom Tom
Answer

Are you trying to move the background image slightly slower than the scrollbar moves the window for a smoother effect?

$(function(){
    var $el = $('#wrapper3');     
    $(window).scroll(function () {
        para($el);
    });
    para($el);
});
var speed = 0.2;
function para($el) {
    var diff = $(window).scrollTop() - $el.offset().top;
    var yPos = -(diff * speed);
    var coords = '50% ' + yPos + 'px';
    $el.css({
        backgroundPosition: coords
    });
}
/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
    color: #fff;
}
h1 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.wrap {
  height: 350px;
}

#wrapper1 {
  background-color: red;  
}

#wrapper2 {
  background-color: blue;  
}

#wrapper3 {
    background-image: url('http://www.geneva.edu/blog/_assets/shutterstock_261648890%20-%20Child%20and%20Family%20Services.jpg');
    background-attachment: fixed;
    min-height: 350px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    display: block;

}

#wrapper4 {
  background-color: yellow;  
}
#wrapper5 {
  background-color: red;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap" id="wrapper1">
<h1>
content here
</h1>
</div>
<div class="wrap" id="wrapper2">
<h1>
content here
</h1>
</div>
<div class="wrap" id="wrapper3">
<h1>
content here
</h1>
</div>
<div class="wrap" id="wrapper4">
<h1>
content here
</h1>
</div>
<div class="wrap" id="wrapper5">
<h1>
content here
</h1>
</div>