尝试获得更平滑的视差滚动速度 and/or 深度感知

Question

我正在处理一个需要视差效果的网站。没什么好看的。

我想要实现的是 similar to this - 页面中间。观察滚动速度，是..."buttery smooth"。这么说吧。

我的也差不多，除了滚动速度，我好像不太懂。 Fiddle.

CSS:

section.module.parallax {
  height: 200px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

section.module.parallax-1 {
  background-image: url("http://wearefetch.com/wp-content/uploads/2014/07/3.jpg");
}

.up{
    width: 100%;
    height: 400px;
    background-color: red;
}
.down{
    width: 100%;
    height: 400px;
    background-color: blue;
}

HTML:

<div class="up"></div>
    <section class="module parallax parallax-1">
        <div class="container"></div>
    </section>
<div class="down"></div>

我尝试在 another fiddle 中使用 data-speed。不过好像差别不大。

代码与第一个Fiddle完全相同，只是添加了一些javascript，当然还有data-speed，设置为10。

$(document).ready(function () {
    $('section[data-type="background"]').each(function () {
        var $bgobj = $(this);
        $(window).scroll(function () {
            var yPos = ($(window).scrollTop() / $bgobj.data('speed'));
            var coords = '50% ' + yPos + 'px';
            $bgobj.css({
                backgroundPosition: coords
            });
        });
    });
});

我不是前端人员，所以，虽然我确定这可能很简单，但我似乎无法让它工作。

非常感谢任何朝着正确方向的推动。

Answer 1

如果您将背景设置为与滚动速度不同（较慢）的速度，则视觉上会出现视差效果。

作为视点的垂直滚动条上下移动，背景图像代表远处的物体，并且比背景上方的文本等较近的物体移动得更慢。

Fiddle of this question 是一个很好的起点。

Fiddle处理滚动事件，"parallax"通过设置固定背景图backgroundPosition属性。

演示标记（css 仅内联示例）：

<div id="parallax" style="background-position: 50% 0;background-repeat: no-repeat;background-attachment: fixed;background-image: url('http://lorempixel.com/1400/700');">Text in Front appears closer and moves faster</div>

Javascript:

(function ($) {
    "use strict";
     var $el = $('#parallax');
     // scroll callback            
     $(window).scroll(function () {
        updateBackground($el);
     });
     updateBackground($el);
  });

}(jQuery));

var speed = 0.4;

function updateBackground($el) {

    var diff = $(window).scrollTop() - $el.offset().top;
    var yPos = -(diff * speed);

    var coords = '50% ' + yPos + 'px';

    $el.css({
        backgroundPosition: coords
    });
}

尝试获得更平滑的视差滚动速度 and/or 深度感知

Trying to get a smoother parallax scroll speed and/or depth perception

html

css

jquery

scroll

parallax