jquery - 自举视差速度

Question

有没有办法改变视差效果的速度？截至目前，我的设置方式是，图像底部显示，当您滚动图像时，图像也会向上滚动。但是，如果我想要它，那么在初始加载时，图像会在中心加载，当您上下滚动页面时，视差图像只会上下移动约 50 像素。因此，在我下面创建的示例中，我希望家人的脸在加载时位于中心，当我上下滚动时，只显示大约 50 像素的头部和低于初始加载时显示的 50 像素。

这是我的

#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;

}

这是我的 JSFiddle

Answer 1

您是否尝试移动背景图像比滚动条移动窗口稍微慢一些以获得更平滑的效果？

$(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>