-3

私の JavaScript コードは、私の Web サイトを非常に遅くします。何ができるかわかりません。最適化することもできますが、それを実行して JS ファイルも圧縮しました。

誰かが私を助けることができますか？

これは私のコードです:

$(document).ready(function(){
    // opacity #citation
    var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
    scrollorama.animate('#citation',
    { delay: 5, duration: 250, property:'opacity', start:1 
});

//PARRALAX
$('#nav').localScroll(800);
$('#first_nav').localScroll(800);
RepositionNav();
$(window).resize(function(){
    RepositionNav();
}); 

$('#intro').parallax("50%", 0, 0.1, true);
$('#first').parallax("50%", 0, 0.0, false);
$('#second').parallax("50%", 0, 0.1, true);

$('#third').parallax("50%", 0, 0.3, true);

$('#fourth').parallax("50%", 0, 0.3, true);
    $('.work3').parallax("70%", 6800, 0.1, true);
$('#six').parallax("50%", 0, 0.3, true);
    $('.work4').parallax("20%", 7800, 0.1, true);

// SCROLL EFFECT
$(window).scroll(function () {
    if ($(this).scrollTop() > 0) {
        $('#titre_p h2').stop().animate({ width: "60px", opacity: 0, fontSize: "0em"}, 500 );   
        }
    if ($(this).scrollTop() > 300) {
        $('#titre_p h2').stop().animate({ width: "190px", opacity: 0, fontSize: "0em"}, 500 );   
        }
    if ($(this).scrollTop() > 310) {
        $('#titre_p h2').stop().animate({ width: "190px", opacity: 1, fontSize: "1.9em"}, 100 );
        }
    /*titre_2*/
    if ($(this).scrollTop() > 0) {
        $('#titre_p2 h2').stop().animate({ width: "0px", opacity: 0, fontSize: "0em"}, 500 );   
        }
    if ($(this).scrollTop() > 1360) {
        $('#titre_p h2').stop().animate({ width: "190px", opacity: 0, fontSize: "0em"}, 500 );   
        }
    if ($(this).scrollTop() > 1370) {
        $('#titre_p2 h2').stop().animate({ width: "190px", opacity: 1, fontSize: "1.9em"}, 500 );
        }


    $('.work1').parallax("70%", 3740, 0.2, true);   
    if ($(this).scrollTop() > 1558) {
           $('.work1').parallax("70%", 2820, 0.8, true);   
    }

    $('.work2').parallax("23%", 5950, 2.1, true);        
    if ($(this).scrollTop() > 2528) {
        $('.work2').parallax("23%", 3798, 2.8, true);   
    }

    if ($(this).scrollTop() > 1370) {
        $("#work").removeClass('out').addClass('in'); 
    }   

})
})
4

1 に答える 1

2

スクロール イベントで animate() メソッドを呼び出しています。このイベントは、ユーザーがスクロールバーをドラッグしている間、常に発生します。これにより、非常に高価な多くの animate() 呼び出しが発生します。

コードを見ただけでは、作成したい効果を正確に判断するのは難しいため、別の方法を提案することはできません。達成したいことについて詳しく説明しますか？

于 2012-09-07T13:12:28.177 に答える