0

ユーザーが下にスクロールすると、画面の左右から表示される画像があります。

divPosition = $('div').offset().top; 含む要素の位置を取得するために使用して、値を減算し、そのscrollValue = $(document).scrollTop();値を絶対位置の画像の左の位置に適用します。

含まれている div のオフセットは、更新およびサイズ変更時に計算されます。ウィンドウのサイズを変更しないx=scrollValue - divPositionと、ページのスクロール量に応じて更新時に変化します。一貫性を持たせたい。このタイプのアニメーションを機能させるより良い方法はありますか?

たとえば、垂直スクロールをウェイポイントの x 値として使用してアニメーションをトリガーすることは可能ですか?

    window.onresize=function(){
        divPosition = $('div').offset().top;
    };

    $(document).scroll(function(){
        scrollValue = $(document).scrollTop();
        x = scrollValue - divPosition;
    }

ここにサイトへのリンクがあります。問題の原因を発見したら、この質問にコードの関連セクションを投稿します。

http://www.otherdewi.com/gg.html

4

2 に答える 2

1

jsfiddleを投稿するか、現在機能しているWebサイトへのリンクを投稿できますか..

質問があります...

アタッチおよびデアタッチできるcssクラスを使用して、およびを使用してdivをウィンドウの上部にアタッチしたままにしないのはなぜposition:fixedですかtop:0。それははるかに滑らかで、重くないでしょう。

はい、次のようなウェイポイントを作成できます。

これを行う一例は次のとおりです。

http://jsfiddle.net/techsin/f7bhy/8/

var doc = $(document),
    wpoints = [5, 10, 15, 20, 25], //5 points for 5 slides...1st slide appear at start
    mh= wpoints[wpoints.length - 1], //and switch to 2nd at '5', and scrolling stop at 25
    h = wpoints[0],
    l = 0,
    i = 0,
    pos = 0;

doc.on('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta > 0) {
        if (pos > 0) pos--;
    } else if (pos<mh) pos++;

    if (pos >= h){ set(1); }
    else if (pos <= l) set(-1);
});

function set(x) {
    if (x == 1 && (wpoints[i + 1] != undefined)) {
        l = h
        h = wpoints[++i];
        doWork();
    }

    if (x == -1 && (wpoints[i - 1] != undefined)) {
        h = l
        l = wpoints[--i - 1];
        doWork();
    }
}

doWork();
function doWork() {$('.slide').hide().eq(i).slideDown();}
于 2013-10-01T04:40:08.380 に答える