Dipity Timeline UIを実装するにはどうすればよいですか？

Question

Dipityについて聞いたことがない人は、ブラウザでタイムラインを作成できるWebアプリケーションです。タイムラインの例を次に示します。 http://www.dipity.com/StevePro/Steve-Jobs-Life-and-Career/

上記のリンクに表示されているタイムライン機能を実装するにはどうすればよいですか？具体的には、ズーム、モメンタムスクロール、およびその他のUI要素は、Flashなしでどのように達成されますか？

あなたの専門知識の下で、私が拡大/縮小したり、スクロールしたり、上記のようなフルスクリーンになるキャンバスを作りたいと思ったら、どのような図書館やプロジェクトを見なければなりませんか？

ご協力いただきありがとうございます。

Answer 1

まず第一に、あなたがソースを表示することができ、彼らはjQueryとjQueryのプラグインを多く使用していることを参照してください。

<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityAccount.js.v8972.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery-1.4.2.min.js.v8078.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipity.js.v9015.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityCookie.js.v8941.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityDialog.js.v8941.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipitySearch.js.v8941.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery-ui-1.8.custom.min.js.v8078.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/swfupload2.2.0/swfupload.js.v7257.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/swfupload2.2.0/functions.js.v8803.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/carousel.js.v8453.js"></script> 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/typewatch.js.v7961.js"></script> 
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery.mousewheel.min.js.v8346.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery.autogrow-textarea.js.v8871.js"></script> 
<script type="text/javascript" src="http://www.dipity.com/js/widget.js?key=8307484b5ef1207f7f202fe890a8e14d&sig=5d284fd444ffec2ff3b59dbe2d3d8167"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityForms.js.v8941.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityEvent.js.v8979.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityTopic.js.v8941.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/eventdetail.js.v8490.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/tl_below.js.v6370.js"></script> 
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/ajaxForm.js.v8875.js"></script> 

あなたはどんな「やるA、B、およびCを取得するつもりはないとあなたは完了しました」彼らは非常に複雑なUIがそこにあるので、私の提案は、その1つの部分（キャンバスやマウスホイールのイベント）から始まり、一度に小さな部分を作成するか、またはプラグインを作成してそれらをまとめて、後になったものを構築する。

これは、ほぼすべてのソフトウェアが構築されているのと同じ方法です。個々のビルディングブロックを取り出し、スタックして独自のユニークな作成を作成します。