6

私は単純なコードのチャンクを使用しています（「ScrollTo Posts with jQuery」に基づいています。これにより、次/前のリンクをクリックすると、各投稿の上部にジャンプできます。

私はHTML構造を持っているので、投稿>画像>投稿>画像などになります。

次/前のボタンをクリックすると、通常どおり次の投稿にスクロールする可能性があるかどうか疑問に思っていますが、画像/ div の間でハング/ホバーしますか? そのため、最終的にスクロールは完了しますが、その間の div では速度が低下します。

ここに私のjQueryコードがあります:

$(function () {
    function a(f) {
        var b, e, c = [],
            d = $(window).scrollTop(),
            g = $('.section-slide');
        g.each(function () {
            c.push(parseInt($(this).offset()['top'], 10))
        });
        for (e = 0; e < c.length; e++) {
            if (f == 'next' && c[e] > d) {
                b = g.get(e);
                break
            }
            if (f == 'prev' && e > 0 && c[e] >= d) {
                b = g.get(e - 1);
                break
            }
        }
        if (b) {
            $.scrollTo(b, {
                duration: 1400
            })
        }
        return false
    }
    $('#next,#prev').click(function () {
        return a($(this).attr('id'))
    });
    $('.scrolltoanchor').click(function () {
        $.scrollTo($($(this).attr('href')), {
            duration: 1400
        });
        return false
    })
});
4

2 に答える 2

1

これは、異なる要素を異なる速度でスクロールさせる視差スクロール ライブラリ (Stellar.js) を使用しているためです。

現在のビューポートに要素がない場合、次の要素の端が画面の外に出るまで高速でスクロールし、すぐにビューポートに要素がなくなるまで元のスクロール速度でスクロールすることで解決できます。目的のスクロール オフセットに到達するまで、これを繰り返します。

編集：

申し訳ありませんが、回答を書いているときに何かが発生し、コードを完成させる時間がありませんでした。

しかし、しばらく取り組んだ後、私が提案した解決策はうまくいかないと思い始めています。私はそれらの線に沿って何かを考えていました：

$(window).scrollTo(640, {onAfter: function () {
    var scrollRatio = 3;
    var distance = 855 - 640;

    $(window).scrollTo(855, {
        easing: 'linear',
        duration: distance * scrollRatio / speed,
        onAfter: function () {
            var scrollRatio = 1;
            var distance = 1200 - 855;
            $(window).scrollTo(1200, {
                easing: 'linear',
                duration: distance * scrollRatio / speed,
                onAfter: function () {
                    var scrollRatio = 3;
                    var distance = 1280 - 1200;
                    $(window).scrollTo(1280, {
                        easing: 'linear',
                        duration: distance * scrollRatio / speed
                    });
                }
            });
        }
    });
}});

質問で提供された Web サイト ( http://dev.du.st/field-station/ )に前のコードを貼り付けると、最初の要素に移動し、次の要素にスクロールしようとします。私が説明した方法を使用するもの。まだ実験中だったので、オフセット値をハードコーディングしました。ただし、このアプローチはまだうまくいかないので、うまくいかないと思います。これは、アニメーションの途中で瞬時に速度を変更すると、常に目立つためです。

現時点では、パララックス スクロールが原因で発生しているスロー スクロール感を緩和する最善の方法は、別のイージング関数を使用することだと思います。結局のところ、背景画像を遅くすることは、まさに視差スクロールを使用していることです。

次のコードを Web サイトで実行すると、すべてのアニメーションがデフォルトでイージング関数に 'easeOutCirc' を使用するようになります。いくつかの実験の後、スクロールが最も奇妙に感じられないコードであることがわかりました。

// Add the jQuery-easing plugin, needed for the more sophisticated easing functions.
$.getScript('//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js');

// Set easeOutCirc as the default easing.
jQuery.easing.def = 'easeOutCirc';

このウェブサイトでより多くのイージング関数を見つけることができます

実験が終わったら、イージングを使用することに決めた場合 (上下のスクロールに別のイージングを使用できます)、おそらくデフォルトのイージングをそのままにして、スクロール アニメーションのイージングを追加して変更する必要があります。関数{easing: EASING_NAME}内のオプションハッシュにscrollTo。したがって、コードは次のようになります。

$.scrollTo($($(this).attr("href")), {
    duration: 750,
    easing: 'easeOutCirc'
});
于 2013-03-01T10:01:43.033 に答える
1

構造が静的なままであると仮定すると、投稿 -> 画像 -> 投稿 -> 画像など。スクロール先の投稿の前/次の画像を見つけ、最初にスクロールしてから、onAfterコールバック/を使用することでこれを達成できます。次のよう$.scrollToに定義済みの後に二次スクロールを起動するようにプラグインから設定します。setTimeout

$(function () {
    function scroll(direction) {
        var scroll, scrollImage, i,
            positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

        collection.each(function () {
            positions.push(parseInt($(this).offset()['top'], 10));
        });

        for (i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) {
                scroll = collection.get(i);

                // Find Image Before Post
                scrollImage = $(scroll).prev('.image').get(0);

                break;
            }
            if (direction == 'prev' && i > 0 && positions[i] >= here) {
                scroll = collection.get(i - 1);

                // Find Image After Post
                scrollImage = $(scroll).next('.image').get(0);

                break;
            }
        }

        if (scroll) {
            // Check if Scroll Image Exists
            if (scrollImage){
                // Scroll with Image Delay
                $.scrollTo(scrollImage, {
                    duration: 750,
                    onAfter: function(){
                        setTimeout(function(){
                            $.scrollTo(scroll, {
                                duration: 750
                            });
                        }, 1000); // Change the Delay to Increase / Decrease the Hover
                    }
                });                
            } else {
                $.scrollTo(scroll, {
                    duration: 750
                });
            }
        }

        return false;
    }

    $("#next,#prev").click(function () {
        return scroll($(this).attr('id'));
    });

    $(".scrolltoanchor").click(function () {
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });
});

ここで更新されたフィドルを見つけることができます: http://jsfiddle.net/hfg2v/2/

これが役立つことを願っています。

于 2013-02-26T16:46:05.540 に答える