javascript水平视差与缓和和stellar.js

Question

I'm trying to create an horizontal parallax scrolling site. For now everything is working except the easing part. Here is the code:

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

To try this (without easing) just remove the line

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

How can I add easing to the scrolling?

I'm trying to achieve something like this: http://hotdot.pro/en/

Thank you!

Answer 1

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

I noticed that in your code, you call $('div.ease').offset.left This is where your code is breaking. I've updated the fiddle to have the correct code. It should be $('.ease').offset().left (It is considered bad practice to over qualify your css selectors, so you can leave the div out of it)

The animate code should be solid, however, your logic on choosing where to animate to still needs some work. You select $('div.ease') and don't specify which index of the indicies you are referencing, so jquery assumes the first node in the DOM.

Secondly, every time a mouse event is registered, it is trying to animate it. I would unbind the mouse scroll and in a callback function rebind the mouse scroll, and update some kind of counter to select which index you wanted to go to.

This is a really good example of what you are trying to create

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