浏览器滚动图片速度慢

Question

我正在尝试构建一个可以有 3 个“层”的页面。 1 - 背景，2 - 图片和 3 - 图片。

我已经使用animate jQuery 函数实现了这一点，并且当我使用导航菜单时它可以完美运行。但是，当用户滚动浏览器控制台/窗口（Internet Explorer、Chrome、Firefox ......）时，我希望有同样的效果。我不知道我是否说清楚了，所以这是我发现的具有类似效果的页面：http://johanreinhold.com/

我正在寻找一段时间，但我还没有得到它。我该如何解决这个问题？

我的animate 代码是

function goto(id)
{
    $('html,body').animate({scrollTop: $("#"+id).offset().top},2000);
    $('html,body').clearQueue();
}

Answer 1

你的问题很难理解。在您链接的页面上，我没有看到滚动行为的任何覆盖，但我认为您希望滚轮的每个刻度都将您发送到下一部分。

您需要窃取滚动事件并阻止默认行为。然后弄清楚你希望如何滚动。

http://jsfiddle.net/VTEt8/1/

HTML

<div id="a" class="section active">a</div>
<div id="b" class="section">b</div>
<div id="c" class="section">c</div>
<div id="d" class="section">d</div>
<div id="e" class="section">e</div>
<div id="f" class="section">f</div>

jQuery

//Capture mousewheel event for document window.
//we have to use two events because Firefox uses DOMMouseScroll.
$(document).bind('mousewheel', function(e) {
    HandleScrollEvent(e, -1 * e.wheelDelta);
}).bind('DOMMouseScroll', function(e) {
    HandleScrollEvent(e, e.detail);
});

function HandleScrollEvent(e, wheelDir) {
    //Cancel the scroll event so the page doesn't scroll.
    e.preventDefault();

    //Find current and next sections.
    var curElement = $('.active');
    var nextElement
    if (wheelDir > 0) 
        nextElement = $(curElement).next('.section');
    else {
        nextElement = $(curElement).prev('.section');
    }

    //If we have a another section then go to it.
    if ($(nextElement).length > 0) {
        //set class of active section
        $(curElement).removeClass('active');
        $(nextElement).addClass('active');

        //Scroll to next section through animation.
        goto($(nextElement).attr('id'));
    }
}

function goto(id) {
    console.log(id);
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 500);
    $('html,body').clearQueue();
}

Answer 2

我也不完全确定你的意思（所以如果他的答案是你想要的，我向你和 @mrtsherman 道歉），但我想你是在问如何获得视差滚动效果。您链接到的网站使用 MooTools

    $$("#floaters-0, #floaters-01, #floaters-02, #floaters-1, #floaters-11, #floaters-12, #floaters-2, #floaters-21, #floaters-22, #floaters-3, #floaters-31, #floaters-32").each(function(item) {
        item.store('top', parseInt(item.getStyle('top')));
        item.store('y', item.getPosition().y);
        item.store('friction', parseFloat(item.get("data-friction")));
    });

    this.addEvent('scroll', verticalParallax);

function verticalParallax(e) {

    var windowScrollY = window.getScroll().y;

    $$("#floaters-0, #floaters-01, #floaters-02, #floaters-1, #floaters-11, #floaters-12, #floaters-2, #floaters-21, #floaters-22, #floaters-3, #floaters-31, #floaters-32").each(function(item) {

        if ((windowScrollY) >= item.getPosition().y)
            item.setStyle("top", item.retrieve('top') + (windowScrollY - item.retrieve('y')) * item.retrieve('friction'));
    });
};

jQuery

我已将其移至 jQuery（以一种粗略且现成的方式）并将其卡在 JSFiddle 中 http://jsfiddle.net/meloncholy/FhxZ3/1/

    $(function ()
    {
        $(".float").each(function ()
        {
            var $this = $(this);

            $this.data("startTop", $this.offset().top);
        });

        $(window).scroll(function ()
        {
            var documentScrollTop = $(document).scrollTop();

            $(".float").each(function ()
            {
                var $this = $(this);

                $this.offset({ top: $this.data("startTop") + documentScrollTop * $this.data("friction"), left: $this.offset().left });
            });
        });
    });

CSS

    .float { display: block; left: 100px; position: fixed; }

        #float-1 { top: 50px; }

        #float-2 { top: 400px; }

        #float-3 { top: 850px; }

    .content { font-size: 48px; position: relative; z-index: 2; }

代码挂钩scroll 事件并在触发时调整图像的位置。滚动量由摩擦属性控制，因此将其设置为0.5（如示例中所示）意味着它们应该以文本速度的一半移动。事实证明（尽管我想回想起来很明显）将视差元素设置为具有position: fixed 很重要，否则你会得到一些令人讨厌的跳跃。

正如我所说，这有点粗糙和准备好了（特别是其他网站通常只在某个垂直窗口中运行视差效果），所以你可能想点击谷歌parallax scroll jquery或其他东西，看看别人是如何正确地做到这一点的。 :)