말더듬는 배경 이미지 IE

Question

jQuery로 배경 위치를 변경하는 데 문제가 있습니다. 내가 작업하고있는 웹 사이트 (http://www.jeroenrood.nl/GortzFruit)에는 스크롤링 애니메이션 (스크롤 휠 또는 앵커 클릭)이 있으며 백그라운드에서 img 태그의 상단 위치가 스크롤 속도보다 느리게 변경됩니다.

이렇게하면 Chrome 및 Firefox에서는 시차 효과가있는 스크롤 효과가 만들어 지지만 Internet Explorer에서는 효과가 없습니다. IE에서 (어떤 버전이든 관계없이)이 효과는 (앞에서 언급 한 링크에서 볼 수 있듯이) 많이 더듬습니다.

이

는 시차 스크롤 효과 (HTML)와 관련된 내가 사용하는 코드입니다 :

<div style='height:1000px;background-color:#333;position:relative;' id='page1'> 

    <img src='images/bg1.png' alt='' style='display:inline;position:absolute;top:-60px;left:0px;width:100%;z-index:0;' class='background' /> 

</div> 

을 그리고 이것은 자바 스크립트/jQuery 코드입니다 :

var page1 = $('#page1').offset().top; 
var windowHeight = $(window).height(); 

$(window).scroll(function(){ 
     var scrollTop = $(window).scrollTop(); 
     //if the first page is in the viewport 
     if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){ 
      newOffset = -60 + ((scrollTop - page1)*0.8); 
      $('#page1 .background').css('top',newOffset); 
     } 
}); 

어떻게 든 IE가에 지연 보인다 이미지의이 위치를 처리하고 적용합니다. IE를 크롬이나 파이어 폭스와 비슷한 부드러운 스크롤 효과를 만드는 방법에 대해 누구나 알고 있습니까? 사전에

감사합니다,

제론

---

편집 :

좋아, 해결책을 찾는 나의 길이다!

나는 background-attachment를 시도했다 : IE에서 말더듬을 유발하지 않는 고정. 그렇다면이 CSS가 시차 효과와 결합 될 수 있다고 생각했습니다. IE에서 전환에 틈새가 생겨서 배경 부착으로 고정 할 수 있습니다 : 고정.

이것은 작동하는 것 같습니다. 이제는 IE에서 유창한 애니메이션입니다. 방대한 배경 이미지가있는 경우에도.

이

코드 (HTML)입니다 :

<div style='height:1000px;background-color:#333;position:relative;text-align:center;' id='page1'> 

    <div class='background' style='display:inline;position:absolute;top:-60px;left:0px;height:1000px;width:2000px;z-index:0;background-image:url(images/bg1.png);background-repeat:no-repeat;background-position:left -60px;background-attachment:fixed;'></div> 

</div> 

그리고 이것은 관련 자바 스크립트/jQuery 코드입니다 :

var page1 = $('#page1').offset().top; 
var windowHeight = $(window).height(); 
$(window).scroll(function(){ 
     var scrollTop = $(window).scrollTop(); 
     //if the first page is in the viewport 
     if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){ 
      newOffset = "left "+ (-60 - ((scrollTop - page1)*0.2))+"px"; 
      $('#page1 .background').css('background-position',newOffset); 
     } 
}); 

Answer 1

많이 작은 this image합니다. 2000 × 2386 픽셀 및 8.3MB입니다. 1000 × 1193 픽셀로 만들어 JPEG로 변환 할 수 있습니다. JPEG는 사진을 PNG보다 잘 압축합니다. 브라우저는 작은 이미지를 큰 이미지보다 훨씬 빠르게 처리 할 수 ​​있습니다.