重新創建photojojo幻燈片技巧

我正在尋找一些關於如何重新創建此功能的指導。它的功能是當你點擊DO NOT PULL時，通過動畫滾動到一個錨點按鈕。你可以在這裏看到它的動作。 http://photojojo.com/store/awesomeness/iphone-dot-pano-lens/重新創建photojojo幻燈片技巧

任何人都可以幫助我理解這是怎麼發生的？源代碼告訴我什麼..

問候

來源

2012-02-01 andresmijares25

有兩種方式 - 你可以讓閃光燈和出口複雜的動畫爲GIF，或打閃光燈。

然後對事物的JS端，你將設置爲如2秒的超時，當這種情況發生 $('html').scrollTop(600); //實際上是一個可以爲任意數量的只是一組位置滾動

等完整的執行將是什麼像

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

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

來源

2012-02-01 21:12:33

謝謝你的回答德魯，'btn'，會是觸發器類的權利？ – andresmijares25 2012-02-01 21:20:32

是的，它會觸發動畫被添加和播放。並且將GIF添加到頁面中，並且計時器將開始假定您的動畫是2秒長，2秒後它將滾動頁面。在動畫結束後，您需要添加一秒左右，以便它保持靜止，以免循環。 – 2012-02-01 21:38:48

引用德魯的答案，這個特殊的例子不是做Flash或GIF。

他們所做的都是將六張PNG圖像疊加在一起並隱藏起來。然後，一旦用戶交互發生，他們顯示然後隱藏序列中的每個圖像。隨着最後一張圖片可見，他們然後執行頁面滾動。動畫完成後，序列中的最後一個圖像會再次隱藏。沖洗重複每次點擊。

德魯的滾動頁面的方法將正常工作。如果你想放鬆或其他更復雜的控制，你也可以使用.animate（）方法。

來源

2012-02-01 21:31:00

附註：看起來他們也會稍稍動畫一個或多個PNG圖像，使其看起來更平滑（反彈等）。 – 2012-02-01 21:34:02

重新創建photojojo幻燈片技巧

回答

相關問題