자바 스크립트 및 성능

Question

이상한 문제가 발생했습니다. 내 페이지를 대각선으로 스크롤하는 Javascript 코드가 있습니다. scrollTop() 값을 사용하여 대각선으로 스크롤합니다. 하지만 두 개의 "레이어"로 스크롤하려고하면 전경이 배경 레이어보다 많이 스크롤됩니다. 아래로 스크롤을 끝내고 다시 위로 스크롤하려고하면 애니메이션이 느려집니다.

예를 들어, 다음과 같이 선언하는 바와 같이 vars를 캐싱하는 것과 같이 나는 여기에서 보았던 것처럼 일을 시도했습니다. 운이없는 $ 윈도우로 $ (창). 이 문제가 수학이나 애니메이션에 의해 발생하는지는 잘 모릅니다. http://jsfiddle.net/sPB3a/

현재 전체 화면에서을 체험 할 수 있습니다 : 어떤 팁을위한 http://jsfiddle.net/sPB3a/show/

감사를

여기 내 jsfiddle입니다!

Answer 1

문제의 근본 원인이 배경 이미지의 크기라고 생각합니다. 귀하의 페이지에서 모든 배경 이미지를 제거하고 완벽하게 부드러운 스크롤을 얻을.

정말 무겁습니다. 당신은 매우 낮은 품질의 jpg 이미지 (20k 미만)로 시도해야합니다. 이 방법이 효과가 있다면 이미지를 작업하여 좋은 절충안을 찾아야합니다.

참고 : png 형식은 느슨한 이미지 형식입니다. 작은 이미지와 스크린 샷 (넓은 영역의 색이 정확히 같은 경우)에 적합합니다. 매우 유사한 색상, 흐림 및 그라디언트가 많은 경우 좋지 않습니다. 예 : 사진. 귀하의 경우에는 jpg 형식을 사용하고 품질 수준을 조정해야합니다.

Answer 2

$(window).scroll 함수에서 dom을 쿼리하고 있습니다. 나는 그 좋은 연습을 생각하지 않는다.

자바 스크립트를 통해 dom에 액세스하면 변수가 캐시되는 속도가 매우 느립니다.

코드에 많은 것들이 있습니다. 도움이되는지 확인하십시오.

Fiddle

$(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'});   
    }); 

});