Способ плавного перемещения большого изображения?

Question

У меня очень широкое изображение снежной сцены с несколькими деревьями и снежным шаром на вершине. Игра состоит в том, чтобы снежный ком перепрыгивал через деревья. Итак, у меня есть изображение, перемещающееся влево как своего рода боковой скроллер, но, что бы я ни пытался, оно очень медленное. У меня есть набор предложений if, чтобы проверить, не столкнулся ли шар с деревом, и я попытался использовать setInterval, watch.js и requestAnimationFrame.js без особой удачи.

Вот фрагмент того, что я делаю

$('#StartScroller').click(function() {
      sideScroller.css('left', '-10000px');
      snowball.css({
        'transform': 'rotate(12000deg)',
        'width': '100px',
        'height': '100px'
      });

$('sideScroller').watch('left', function(){
 //1
 if(
 (sideScroller.position().left < -960 
 && sideScroller.position().left > -1200 + mobileDelay)
 && (snowball.css('bottom') == '75px')
 ){hitTree()} 

Кто-нибудь знает альтернативу, которая сделает его более гладким? Теперь это немного болит глаз.

Answer 1

Просто нашел очень простое решение: вместо того, чтобы использовать левое позиционирование для перемещения изображения, я использовал transform: translate. Намного лучше. Тем не менее, я хотел бы услышать любые альтернативы использованию setInterval для мониторинга изменений. Йорам упомянул 3d перевод. Я попробовал обычный translate и translateX, но я не уверен, заметил ли я разницу.