перемещение и анимация спрайта по горизонтали при прокрутке по вертикали

Question

Я пытаюсь воспроизвести эффект, сделанный знаменитым сайтом «ben the bodyguard».

В частности, я пытаюсь создать изображение спрайта, перемещающегося горизонтально на экране при прокрутке по вертикали страницы. Так что это 2 шаг эффект:

• прокрутки по горизонтали
• Animate спрайт (это один они используют http://benthebodyguard.com/images/thiefsprite.png)

мне удалось скопировать страницу «как есть» на месте, но всякий раз, когда Я пытаюсь настроить его. Я теряю некоторые функциональные возможности или анимация становится супер странной.

Поиск здесь в SO я нашел этот http://jsfiddle.net/pGvgc/2/

$(document).ready(function(){ 

var windowWidth = $(window).width();  
$("#block").css({ "right": windowWidth}); 

$(window).scroll(function(){  
    $("#block").css({ "right": windowWidth - $(window).scrollTop()}); 
}); 
}); 

, но я не понимаю, как контролировать запуск и остановку прокрутки и, еще более важно, как анимировать спрайт динамического изменения фона должность.

Answer 1

Я пытаюсь сделать что-то похожее на benthebodyguard, и я попытался найти лучшее решение. Пока я пробовал скрипты, такие как scrollpath, skrollr и crspline. Но я недавно нашел raphael.js, и на основе этого [jsfiddle] я решил использовать if для анимации. Возможно, это может помочь вам и с вашей анимацией прокрутки. Астрология спрайта, по крайней мере для меня, будет немного больше, так как у меня есть более сложная дорога, которой должен следовать персонаж!