ユーザーがスクロールして曲がったパスに沿って要素を移動する

Question

私は、ユーザーがスクロールするときにページをスネークする（ページが下部に読み込まれる）所定のパスをたどるページを作ろうとしています。

jQuery.pathのようなものを使用してSVGのanimateMotionを使用してパスに沿って要素をアニメートすることはできますが、ユーザーがスクロールするときにその要素がそのパスに沿って移動する解決策を理解することはできません。

jQueryスクロールパスは、要素をページの中央に移動するので、私が探しているものではありません。

私はTEDxGUCウェブサイトで見たことがありますが、スクロールすると曲がったパスに沿ってリンゴが移動します。私は彼らがRaphael.jsと 'pathに沿ったアニメーション'を使っているのを見ることができますが、実際にどのように達成したのかまだ頭を悩めることはできません - 私はまさにJS忍者ではありません。

正しい方向のポインタは本当に感謝しています！この種のもので、まだ興味がある人々のために

EDIT

、私はかなり私が探していたまさにしている、Skrollr Pathに出くわし：example

Answer 1

私はwww.tedxguc.comウェブサイトの開発者です。

スクロールでアニメーションを使用する方法について、あなたはすでに適切な道筋にいると思います。あたかもスクロールバーがビデオプレーヤーのシークバーであるかのように、アニメーションを単純に概念化しました。

ページの高さをアニメーションの長さに設定して、アニメーションの1ピクセルごとの移動がタイムライン内を移動しているかのように1msに相当するようにします。

homepage.jsファイルの最後にアニメーション設定コードが表示されます。

makeAnim（で

）あなたは、これは基本的に何本

setAnim(obj.apple,{0:{along:0}, 1000:{along:1}}, start+3200, 1000); 

のようなコードをたくさん見つけることがある：リンゴを設定し、そのようなことは、パスの0（スタートだから、それが移動すること）を1（パスの終わり）に設定し、アニメーションの「開始」+ 3200ピクセルのオフセットを開始するスクロール スクロールの1000px以内に行います。

わかりやすくするためにコードを少しばかげて固定しました。

開発の初期のコンセプトのjsfiddleはここにあります。私のコメントが助けられることを願っています。

Answer 2

あなたが取るあなたの数式を作成する必要がありますy値とは...となるxを計算しますが、ここで私が思い付いたものです

http://codepen.io/anon/pen/zCuEb

HTML

<div id="oh" style="background-color:red;height:100px;width:100px;position:fixed"></div> 
<div style="height:25000px;width:20px;background-color:#000033">&nbsp;</div> 

JS

var $w = $(window); 
var $d = $('#oh'); 
$w.scroll(function(){ 
    $d.css('left',formula400()) 
}); 
function formula400(){ 
    return Math.sin($w.scrollTop()/100)*100 
}