는 수평 스크롤

Question

내가 스크롤에 회전 이미지를셔서이 코드를 사용하고

에 이미지를 회전, 그것은 좋은 일하고있어 내 사이트가 수평으로 스크롤되기 때문에

<script> 
$(window).scroll(function() { 
var theta = $(window).scrollTop() % Math.PI; 
$('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' }); 
$('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' }); 
}); 
</script> 

대신 .scrollTop의, 내가 .scrollLeft를 사용합니다. 이 코드는 다음에서 가져 왔습니다. http://demosthenes.info/blog/718/Rotating-Elements-With-Page-Scroll-In-JQuery

이 사이트의 예는 2 개의 이미지가 있습니다. 그들은 반대 방향으로 그리고 다른 속도로 돌고 있습니다. 이것을 어떻게 할 수 있습니까? 나는 데모 사이트의 근원을보고 주목했다 - 웹킷 변환. 이 일이 그 일과 관련이 있다고 생각하니? 누군가 도울 수 있습니까?

내 이미지가 다른 쪽을 향하게하고 싶습니다. 느린 속도로 회전하고 싶습니다.

Answer 1

매우 간단히 말해서 각 요소에 다른 변환을 적용하면됩니다. 위 예제에서 #rightgear 요소는 -theta rads이고, #leftgear 요소는 theta rads입니다. 다음 중 하나에 작은 수정자를 적용하여 속도를 변경할 수 있습니다.

<script> 
    $(window).scroll(function() { 
     var theta = $(window).scrollTop() % Math.PI; 
     $('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' }); 
     $('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' }); 
     $('#slowgear').css({ transform: 'rotate(' + 0.25*theta + 'rad)' }); 
     $('#fastgear').css({ transform: 'rotate(' + 10*theta + 'rad)' }); 
    }); 
</script>