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

javascript horizontal parallax with easing and stellar.js

本文关键字：javascript 水平 视差 js easing stellar 带有      更新时间：2023-09-26

我正在尝试创建一个水平视差滚动网站。目前，除了宽松的部分，一切都在起作用。这是代码：

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

谢谢！

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/

相关文章：