CSS를 사용하여 스크롤 할 때 내 배경을 어떻게 변경합니까?

Question

내 웹 사이트는 완벽한 풀 페이지 배경 이미지를 가지고 있습니다. 나는 css tricks에서 그것을위한 부호를 움켜 잡았다.

my site을 방문하면 실제 동작을 볼 수 있습니다.

내가 알고 싶은 것은, 특정 길이로 스크롤하면이 이미지가 다른 이미지로 변경 될 수있는 방법이 있습니까?

내 목표는 동일한 이미지를 사용하지만 연설 거품이 개 입에서 나오고 2 이미지가이를 수행 할 것으로 추측하고 있습니다.

CSS에서만 가능합니까 ??????

다음은 현재 사용중인 코드입니다.

html { 
background: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Answer 1

다른 사람들이 이미 말했듯이, Nop는, 당신은뿐만 아니라 CSS로,하지만 약간의 js code 당신을 위해 그것을 할 수 있습니다.

Ex. 그래서 기본적으로 추가하거나 (이 경우에는 jQuery를) javascript와 상단에서 약간의 거리에서 HTML tag에 클래스를 제거 ... 그리고 있습니다

html { 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

html { 
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg); 
} 

html.scrolled { 
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg); 
} 

:

jQuery(window).scroll(function(){ 
    var fromTopPx = 200; // distance to trigger 
    var scrolledFromtop = jQuery(window).scrollTop(); 
    if(scrolledFromtop > fromTopPx){ 
     jQuery('html').addClass('scrolled'); 
    }else{ 
     jQuery('html').removeClass('scrolled'); 
    } 
}); 

그리고 당신의 CSS 파일에

CSS으로 그 이미지를 변경하십시오.

이제 이미지에 전환을 적용하거나 코드를 사용하여 slideToggle을 만들 수 있습니다. 예를 들어 클래스를 변경하는 대신 .... 및 기타 많은 옵션을 사용할 수 있습니다.

행운

편집 : 바이올린 예 : 시차 http://jsfiddle.net/pZrCM/