带有缓动和 stellar.js 的 javascript 水平视差

Question

我正在尝试创建一个水平视差滚动网站。现在一切正常，除了缓动部分。这是代码:

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type='text/javascript' src='./js/jquery.mousewheel.js'></script>
<script type='text/javascript' src='./js/jquery.easing.js'></script>
<script type='text/javascript' src='./js/jquery.stellar.min.js'></script>
<script type='text/javascript'>
    $(function() {
        $("body").mousewheel(function(event, delta) {
            $('html body').animate({ scrollLeft: $('div.ease').offset.left - 40}, 6000, 'easeInOutExpo');
            this.scrollLeft -= (delta * 30);
            event.preventDefault();
        });
        $.stellar({
            horizontalScrolling: true
        });
    });
</script>
<style type="text/css" style="display: none !important;">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        overflow-x: hidden;
    }
</style>

<div style="width: 3000px;">
    <div class="main" style="height: 100%; width: 1000px; background-color: #ff00ff; float: left; position: relative;">
        <div class="ease" style="font-size: 55px; color: #ffffff; margin-top: 30px; margin-left: 300px; position: relative;" data-stellar-ratio="3" >a</div>
        <div class="ease" style="font-size: 55px; color: #ffff00; margin-top: 95px; margin-left: 600px; position: relative;" data-stellar-ratio="0.9">b</div>
        <div class="ease" style="font-size: 55px; color: #0f0fff; margin-top: 200px; margin-left: 450px; position: relative;" data-stellar-ratio="0.9">c</div>
    </div>
    <div class="main" style="height: 100%; width: 1000px; background-color: #ffff00; float: left; position: relative;">
        <div class="ease" style="font-size: 55px; color: #ffffff; margin-top: 30px; margin-left: 300px; position: relative;" data-stellar-ratio="0.9" data-stellar-horizontal-offset="10">d</div>
        <div class="ease" style="font-size: 55px; color: #ff00ff; margin-top: 95px; margin-left: 600px; position: relative;" data-stellar-ratio="0.15" data-stellar-horizontal-offset="30">e</div>
        <div class="ease" style="font-size: 55px; color: #0f0fff; margin-top: 200px; margin-left: 450px; position: relative;" data-stellar-ratio="0.55" data-stellar-horizontal-offset="20">f</div>
    </div>
</div>

要尝试这个(不缓动)只需删除该行

$('html body').animate({ scrollLeft: $('div.eases').offset.left - 40}, 6000, 'easeInOutExpo');

如何为滚动添加缓动？

我正在努力实现这样的目标:http://hotdot.pro/en/

谢谢!

Answer 1

http://jsfiddle.net/67grK/1/

我注意到在您的代码中，您调用了 $('div.ease').offset.left 这是您的代码出错的地方。我已经更新了 fiddle 以获得正确的代码。它应该是 $('.ease').offset().left(过度限定您的 css 选择器被认为是不好的做法，因此您可以将 div 排除在外)

动画代码应该是可靠的，但是，您选择动画位置的逻辑仍然需要一些工作。您选择 $('div.ease') 并且不指定您引用的索引的索引，因此 jquery 假定 DOM 中的第一个节点。

其次，每次注册鼠标事件时，它都会尝试对其进行动画处理。我将取消绑定(bind)鼠标滚动，并在回调函数中重新绑定(bind)鼠标滚动，并更新某种计数器以选择您想要转到的索引。

这是您尝试创建的一个非常好的示例

http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/