0

ここで私のjsにいくつかの問題があります。

正常に機能しますが、パフォーマンスが非常に遅い場合があります。

下までそっとスクロールしますが、もう一度上にスクロールしようとすると、スクロールが非常に遅くなります。

パフォーマンスを向上させるにはどうすればよいですか?

ありがとう！

$(function(){

var windowHeight = $(window).height();
var windowWidth = $(window).width();
var sectionsNumbers = $("#content section").length-1;
var sectionCount = 0;

// Scroll sets

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

$("#content").css("width", windowScrollX+windowWidth);
$("#content").css("height", windowScrollY+windowHeight);

$(".illusion1").css("width", windowScrollX+windowWidth);
$(".illusion1").css("height", windowScrollY+windowHeight);

// Set mask w and h

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

$("#content section").each(function() {

    // Defines its width and height

    $(this).css("width", windowWidth);
    $(this).css("height", windowHeight);

    // Defines its position
    $(this).css("left", sectionCount*windowWidth);
    $(this).css("top", sectionCount*windowHeight);

    sectionCount++;
});

// When window scrolls

$(window).scroll(function(){ 

    var curScrollTop = $(window).scrollTop();
    var angleVar = windowScrollX/windowScrollY;

    $("#content").stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 250, easing: 'easeOutQuart'});

    $(".illusion1").stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 250, easing: 'easeOutQuart'});

    //{duration: 1500, easing: 'easeOutQuart'}
    });
});
4

3 に答える 3

2

アニメーションでセレクターをキャッシュしていない (また、$(this) または $('#mask') を繰り返し使用するのも無駄です) ため、ユーザーがスクロールするたびに、/dom 全体を検索して #content、#イリュージョン1。また、スクロールは一種の「アニメーション」そのものであるため、スクロールでのアニメーション化はやや冗長です。固定配置が理想的ですが、スクロールごとに CSS スタイルを設定するだけで同じ効果を得ることができます。すべてのスクロールイベントでアニメーションを使用しないでください。また、左と上に「px」を指定していないため、「-」+ を前に付けて文字列に「キャスト」する必要がなくなります。$(window).scroll 関数を次のように書き直してみてください。

var $window = $(window),
    $content = $("#content"),
    $illusion = $(".illusion1");
$window.scroll(function(){ 
    var curScrollTop = $window.scrollTop();
    var angleVar = windowScrollX/windowScrollY;
    $content.css({ left: (-curScrollTop*angleVar)+'px', top: (-curScrollTop)+'px' });
    $illusion.css({ left: (-curScrollTop*angleVar*0.5)+'px', top: (-curScrollTop*0.5)+'px' });
});

あなたの心がアニメーション効果に設定されている場合は、デバウンス/スロットル方法を検討してください。スクロール イベントごとにアニメーション化するのではなく、次を使用します: "timeout = setTimeout(function(){ ... }, 25)" を使用すると、タイムアウトの期限が切れたときにアニメーションが実行され、スクロール時に単純に clearTimeout(timeout) とタイムアウトを再設定してください。アニメーションは、ユーザーが 25 ミリ秒スクロールを停止しない限り実行されないため、リアルタイムではありません。

于 2012-05-26T04:28:51.697 に答える
1

これが役立つかどうかはわかりませんが、スクロール時にブラウザウィンドウを基準にして要素を移動する必要がある場合は、何らかの形式の固定位置を使用します。これにより、絶対的または相対的に配置された要素のオフセットを設定またはアニメーション化しようとするよりも、Chromeやその他のブラウザーでパフォーマンスが向上することがわかりました。おそらく、達成しようとしている効果を示すjsfiddleを作成できれば、さらにアドバイスを提供できます。

編集：jsfiddleの代わりにHTMLの一部を提供できれば、それも役立ちます。

于 2012-05-25T20:40:46.533 に答える
0

バンドル全体を TweenLite に変更することをお勧めします。これは、アニメーションの jQuery よりもスムーズに実行されます。

http://www.greensock.com/v12/

以下の違いを比較できます。

http://www.greensock.com/js/speed.html

于 2012-05-29T16:07:08.653 に答える