0

ここで奇妙な問題が発生しています。ページを斜めにスクロールするJavascriptコードがあります。scrollTop（）値を受け取り、それを分割して斜めにスクロールします。しかし、2つの「レイヤー」でスクロールしようとすると、前景のスクロールが背景のレイヤーよりも大きくなり、下へのスクロールを終了してもう一度上へのスクロールを試みると、アニメーションが遅くなります。

私はここで見たように、変数をキャッシュするなど、運がないのに$（window）を$windowとして宣言するなどのことを試しました。この問題がMathまたはAnimateのどちらで発生しているかはわかりません。

これが私のjsfiddleです：http：//jsfiddle.net/sPB3a/

ここでフルスクリーンで体験できます：http：//jsfiddle.net/sPB3a/show/

ヒントをありがとう！

4

2 に答える 2

0

問題の根本的な原因は背景画像のサイズだと思います。ページからすべての背景画像を削除したところ、完全にスムーズなスクロールが得られました。

彼らは本当に重いです。非常に低品質のjpg画像（20k未満）で試してみてください。これが機能する場合は、適切な妥協点を見つけるために画像を処理する必要があります。

注：png形式はルーズレス画像形式です。小さな画像やスクリーンショット（大きな領域がまったく同じ色である場合）に適しています。非常によく似た色、ぼかし、グラデーションがたくさんある場合は良くありません。例：写真。あなたの場合、jpg形式を使用して品質レベルを調整する必要があります。

于 2012-05-29T13:59:49.907 に答える
0

関数でdomをクエリしています$(window).scroll。私はそれが良い習慣だとは思わない。

変数をキャッシュします。javascriptを介したdomへのアクセスは非常に遅くなります。

私はあなたのコードにたくさんのことを持っています、それがあなたを助けるかどうかチェックしてください。

フィドル

$(function(){


    var $window = $(window);
    var windowHeight = $window.height();
    var windowWidth = $window.width();
    var content = $("#content");
    var section = content.children("section");
    var sectionsNumbers = section.length-1;
    var illusion =  $(".illusion1");
    var mask = $('#mask');
    // Scroll sets

    var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;
    var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;

    content.css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});

    illusion .css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});


    // Set mask w and h

    mask.css({"width":windowWidth,"height":windowHeight});
    $(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);


    section.each(function(sectionCount,val) {

        // Defines its width and height
        var $this = $(this);
        $this.css({"width":windowWidth,"height":windowHeight,"left":sectionCount*windowWidth,"top":sectionCount*windowHeight});


    });

    // When window scrolls


    var angleVar = windowScrollX/windowScrollY;
    var curScrollTop;
    $(window).scroll(function(){
        var $this = $(this);
        curScrollTop = $this.scrollTop();
        content.stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 1250, easing: 'easeOutQuart'});
       illusion.stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 1250, easing: 'easeOutQuart'});        
    }); 

});
于 2012-05-29T14:01:18.120 に答える