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あなたのコードでは、This is where your code is breaking.を呼び出していることに気付きました。正しいコードを持つようにフィドルを更新しました。そうあるべきです$('.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 に答える