新的谷歌日曆登陸頁面滾動

Question

我試圖創建一個類似於新的谷歌日曆的着陸頁頁http://www.google.com/landing/calendar/

我使用skrollr（https://github.com/Prinzhorn/skrollr），但我不能得到正確的效果，對谷歌登陸頁面，如果你做一個小滾動它會發送你到下一個塊和skrollr我無法獲得導航。任何想法如何我可以重現呢？有可能與skrollr做，或者你會推薦另一個JS插件？

謝謝！

Answer 1

如果你還沒有找到解決方案，我一直負責做一個非常類似的事情。有兩種方法可以實現我研究並選擇正確的方法，這主要取決於您設計的複雜程度/預期結果。很抱歉，我無法提供鏈接，因爲該網站在接下來的幾周內不會運行。

這是對我工作：

我以前fullpage.js圖書館實現「整版」滾動效果。你也可以看看onepage-scroll.js，看看哪一個最適合你 - 儘管它們在功能上並沒有太大差別。

優勢利用fullpage.js（除其他事項外）的：

• 整合是快速，簡單
• 允許通過選擇大量的定製散列
• 提供回調時滾動到另一節（在它發生之前或之後）
• 使您能夠通過'方法'手動觸發滾動
• 工作意外在iPad/iPhone上非常好。也許在其他移動設備上，雖然我不能完全確認，因爲 不是我的項目的要求。

現在，當你有段到段的滾動到位時，缺少的是動畫。 考慮到fullpage.js提供了回調函數，就像在轉換到另一個節/幻燈片時添加一個類一樣簡單，然後使用該類通過CSS觸發您選擇的動畫。這是爲我工作，而沒有面臨重大問題。

對於更高級的東西：

如果你正在尋找建立更復雜的東西，那麼我強烈建議你看看tween.js。這是谷歌在您提問的目標網頁上使用的內容。

這是一個非常強大的工具，因此它需要相當多的設置+它將動畫移動到JavaScript，這可能是一個麻煩。我寧願將它們保存在它們所屬的CSS中，直到我真的需要時才使用JavaScript。

---

FYI我也開始skrollr但它不會因爲它確實是禁用滾動和身體動畫/ HTML通過翻譯與「全頁滾動」真正發揮作用。Skrollr建立在滾動事件上的行爲，如果您使用我建議的庫，它將不會觸發。

編輯： 看來，你也可以在參數與fullpage.js實際使用skrollr。你可以看到如何在FAQ site的答案。感謝Alvaro的隱藏！即使那樣，我也不會使用skrollr，除非你真的需要它來獲得一些先進的視差滾動效果 - 就像之前所說的那樣，這取決於你的需求。 :)

讓我知道如果您有任何疑問或某事不清楚在我的答案。

祝你好運！