如何實現網頁之間的平滑過渡？

Question

我正在嘗試創建一個小型站點（~5頁，基本上是靜態的），並且要實現在massivehealth.com中實現的轉換效果。我試圖尋找它，但徒勞無功。我觀察到該網站只使用一個腳本，儘管鏈接表明它是一個多頁面網站，但單擊鏈接會將它們顯示爲/＃頁面而不是/頁面，這表明它們實際上是一個大頁面的一部分。

我想知道究竟是什麼技術背後，以便我能夠完美地學習和實施它。

Answer 1

首先，您絕對應該使用jQuery，因爲它使得動畫創建更加容易。這裏是你應該如何去做的：

1. 把整個頁面內容（所有這些，因爲你聲明所有的頁面只是一個頁面）在一個包裝div。
2. 這個包裝div應該有100％的最大寬度和溢出：隱藏
3. 在主包裝內創建第二個包裝div，但是這個人的寬度等於所有頁面的總寬度（或者更好地說是僞頁面或者其他東西）
4. 現在每個頁面都是第二個封裝器中的div，並且這些位置必須是絕對的（然後您應該爲它們設置適當的左側和頂部位置）。
5. 第二個包裝的位置也必須是絕對的
6. 第一個包裝的位置必須是相對的，否則絕對位置都不會按照您希望的方式工作。
7. 現在，當你想改變頁面時，使用jquery動畫第二個包裝的x位置，並在y方向上使用scrollTo。

如果我想給你代碼，這將需要很長時間，但它背後的整個想法應該是這樣的（當然，我希望如此：D）。

如果你有實現這個想法的任何問題，請告訴

Answer 2

共同順便我是研究今天一樣的。本教程在這裏解釋了一切。 http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/