photojojoのスライドテクニックを再作成

Question

私はこの機能をどのように再現できるかについていくつかのガイダンスを探しています。それがしているのは、「引っ張ってはいけません」をクリックしたとき、アンイテレーションでアンカーボタンまでスクロールしたときです。あなたはここでそれを見ることができます。 http://photojojo.com/store/awesomeness/iphone-dot-pano-lens/

どうすればそのようになるのか理解できますか？ソースコードは私に何も伝えていない。..

よろしく

Answer 1

は、次の2つの方法があります - あなたは、GIFとしてフラッシュと輸出で複雑なアニメーションを作る、またはフラッシュを再生することができます。

その後、物事のあなたのJS側で、あなたはそれが $('html').scrollTop(600); //を発生したとき、本当にそれはそう完全な実行がものになるだろう

をスクロールするだけで設定位置任意の番号にすることができ、2秒と言うのタイムアウトを設定しますドリューの答えを参照

$('btn').click(function(){ 
    $('#wrapper').append("<img src='myanimation.gif' id='ani'>"); 
    setTimeout(scrollDown,2000); 
}); 

function scrollDown(){ 
    $('html').scrollTop(600); 
    $('#ani').remove(); 
} 

Answer 2

のような、この特定の例では、FlashやGIFとして行われていません。

彼らがやったことは、6つのPNG画像を重ね合わせて隠してしまったことです。その後、ユーザインタラクションが発生すると、シーケンス内の各画像を非表示にします。最後の画像が表示されたら、ページスクロールを実行します。アニメーションが完了すると、シーケンスの最後のイメージが再び非表示になります。クリックごとにリンスをリンスします。

ドリューのページをスクロールする方法は正常に動作します。イージングや他のより複雑な制御を望む場合は、.animate（）メソッドを使用することもできます。