4

我正在尝试创建一个水平视差滚动站点。现在一切都在工作，除了缓动部分。这是代码：

<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/

谢谢！

4

1 回答 1

0

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

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

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

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

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

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

于 2013-12-12T06:09:46.593 回答