jquery - 視差サイドバーのスクロール

Question

http://readwrite.com/のような視差サイドバーを作成したいだけです。

そのためのプラグインはありますか？または、このサイトだけのカスタム視差ですか?

Answer 1

数時間の実験とコーディングの後、固定位置 (または広範な jQuery プラグイン) に依存せず、既知のオフセットを使用した絶対位置のみに依存する非常に公開されたソリューションを最終的に思いつきました。

http://jsfiddle.net/LntUP/で動作を確認してください。

それを実現するコード：

$(document).ready(function() {

    var origTop = $('#sidebar').offset().top;
    var origBottom = origTop + $('#sidebar').height();

    var scrollDir = 0;
    var scrollLast = 0;

    var weirdOffset = -8;

    $(window).scroll(function() {

        var scrollTop = $(window).scrollTop();
        var scrollBottom = $(window).scrollTop() + $(window).height();
        var curTop = $('#sidebar').offset().top;
        var curBottom = curTop + $('#sidebar').height();

        if(scrollTop > scrollLast) {
            scrollDir = 1;
        } else if(scrollTop < scrollLast) {
            scrollDir = 0;
        }
        scrollLast = scrollTop;

        if(scrollDir == 1) {
            if(scrollBottom >= origBottom && scrollBottom >= curBottom) {
                $('#sidebar').animate({
                    top: scrollBottom -  $('#sidebar').outerHeight() + weirdOffset
                }, 0);
            }
        }

        if(scrollDir == 0) {
            if(scrollTop <= origTop) {

                $('#sidebar').css('top', (origTop + weirdOffset) + 'px');

            } else if(scrollTop <= curTop) {

                $('#sidebar').animate({
                    top: scrollTop + weirdOffset
                }, 0);

            }
        }
    });
});

私が気付いた唯一のことは、何らかの理由で、brightOffset 変数を使用して補正する 8px のオフセットがあることです。数か月後ですが、まだ悪い迅速な解決策ではありません;）

Answer 2

さまざまな速度でアイテムをスクロールしたいだけの場合、一部のフレームワークはやり過ぎかもしれません。関数をスクロール イベント ( $(document).ready(function(){}); ) にバインドし、スクロール値に事前定義された係数を掛けて手動で上部の位置を設定できます。

これを行う方法に関するチュートリアルがいくつかありますhereおよびhere .

最初のチュートリアルから、この関数はスクロールが検出されたときに呼び出され、絶対に配置された要素をさまざまな速度で移動し、奥行きと遠近感を与えます。

function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
    $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
    $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}

それはより簡単な解決策かもしれません:)

Answer 3

まさにそれを行うプラグインは見たことがありませんが、ページ上で構成することにより、これを非常に迅速にまとめることができるプラグインが数多くあります...

http://johnpolacek.github.com/scrollorama/を見てください。これを使用して非常に迅速に構築できる機能があります。

お役に立てれば。