此滾動速度效果稱為什么，以及如何實現？

Question

我正在學習CSS，並且一直在研究視差效果，因為它真棒@。@ ...但我不喜歡它們中的大多數如何滾動。 我真的很想弄清楚如何實現像本網站一樣的平滑滾動。 我一直在試圖找出它的名字。 我認為是動量滾動？ 但是由於某種原因，當嘗試查找更多示例或教程時，我發現“平滑”或“動量”滾動的所有示例都像常規的急速滾動一樣工作，至少對於我在Chrome上是如此。 我想知道是否有人可以向我正確的方向，使我至少可以了解如何專門針對Chrome進行編碼。 謝謝。

Answer 1

該站點使用CSS轉換。

如果您熟悉視差，而這不是問題所在，那么您注意到的使此站點與其他視差站點區別開的效果是（CSS Transitions）中的過渡緩動。

因此頁面上元素的狀態從開始狀態到結束狀態逐漸緩和。

更具體地說，您可能需要研究CSS轉換矩陣： https : //developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix 。

另外，為進行進一步研究，我強烈推薦Sarah Drasner的書SVG Animations，以及Steven Bradley的《現代網絡的CSS動畫和過渡》一書。

要獲得更多靈感， 請訪問http://www.datasketch.es/中的 “ scrollytelling”和Shirley Wu。 她真的很喜歡滾動講演，並且一直都在舉一些令人贊嘆的例子。

希望有幫助！