每個滾動帶你到一個新的div來啓用動畫

我看到一個非常酷的功能在網站上，我想嘗試複製它，但我有問題搞清楚如何我可以構造它。如果你轉到我提供的鏈接，你會看到，如果你滾動鼠標一次，它會轉到下一個div，前一個會動畫，然後是新動畫。我確信我能弄清楚動畫，但我無法弄清楚的是我如何讓窗口識別出滾動意味着轉到下一個div。通常你必須滾動相當多的方式才能進行這樣的動畫。每個滾動帶你到一個新的div來啓用動畫

view it here

有誰知道我怎麼能做到這一點？

來源

2016-01-15 Paul

正如我通常告訴人們想要複製另一個站點已經做的那樣：查看源代碼。這個腳本是驅動一切的腳本：http://isadoradesign.com/js/expertise-animation.js但它依賴於其他幾個插件。 – Draco18s

該網站使用here的Multiscroll插件。

這是一個整潔的外觀，我建議在嘗試寫一個新的之前使用插件！

一個簡單的方法來檢測在Javascript中移動的看法，從this SO answer採取：

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
// some code.. 
}

然後，您可以加載/不加載插件適當地根據這個檢查的結果。

來源

2016-01-15 17:01:23

太棒了！很好，謝謝。我不知道它叫什麼。 – Paul

我不確定你是否知道，但如果我想爲移動視圖禁用它，該怎麼辦？我可以通過CSS來做到這一點，還是我必須用JS來做到這一點？你認爲每一面都有100％的寬度會覆蓋它嗎？ – Paul

我不認爲CSS就足夠了，因爲插件會繼續觸發，導致未知的效果。我會爲此更新我的答案！ –

每個滾動帶你到一個新的div來啓用動畫

回答

相關問題