Javascript - 平滑的视差滚动鼠标滚轮 [英] Javascript - Smooth parallax scrolling with mouse wheel

问题描述

我有一个应用视差效果的页面。这是使用translate3d实现的。现在，虽然这很好，我想知道如何我可以覆盖默认的步骤滚动鼠标滚轮？

I have a page where I'm applying a parallax effect. This is accomplished using translate3d. Now, while this works well, I'm wondering how I can override the default "steps" when scrolling with the mouse wheel?

如果我滚动滚动条，一切是好的。

If I scroll with the scrollbars, everything is fine. But with the mouse wheel, it's all jumpy.

我以一个非常直接的方式这样做：

I'm doing this in a pretty straight forward way:

    var prefix = Modernizr.prefixed('transform');
    $window.on('scroll', function(){
        var scroll_top = $window.scrollTop();
        if(scroll_top < forside_infographics_offset){
            $_('#slider').css(prefix , "translate3d(0,"+(scroll_top/3)+"px,0)");
        }

    });

现在，我已经看到这个网站的滚动是超级顺畅，还有一个鼠标滚轮步骤。我试图看看代码，他使用 requestAnimationFrame 似乎，但他是如何完成这个excact滚动效果，我不知道。

Now, I've seen this site where the scrolling is super smooth, also with a mouse wheel with steps on it. I've tried to look at the code, and he's using requestAnimationFrame is seems, but how he accomplish this excact scrolling effect, I'm not sure.

http://cirkateater.no/

任何想法？

推荐答案

经过大量的研究，我发现了一个非常简单的解决方案:)
< a href =http://bassta.bg/demos/smooth-page-scroll/> http://bassta.bg/demos/smooth-page-scroll/

After doing a lot of research, I found a pretty easy solution :) http://bassta.bg/demos/smooth-page-scroll/

有趣的是，我没有改变我现有的代码。这将覆盖默认滚动行为，同时保持事件打开我使用像我通常做的。

Interestingly enough, I didn't have to alter my existing code at all. This overrides the default scroll behaviour, while leaving the event open for me to use like I would normally do.

这篇关于Javascript - 平滑的视差滚动鼠标滚轮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！