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或者你会得到一些令人讨厌的跳跃是很重要的。

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

浏览器滚动慢速图像速度

2 个答案: