Question

我正在一个需要视差效果的网站上工作。没什么值得花哨的。

我想要实现的是similar to this - 页面的中间部分。观察滚动速度，它是......“黄油光滑”。可以这么说。

我所拥有的是类似的，除了滚动速度，我似乎无法得到它。 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。但它似乎没有多大区别。

代码与第一个小提琴完全相同，除了一些添加的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的question是一个很好的起点。

小提琴通过设置固定背景图像的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
    });
}

试图获得更平滑的视差滚动速度和/或深度感知

1 个答案: