如何使用 JavaScript 和 CSS 製作滾動動畫

您是否見過基本上每個很酷的公司網站，並注意到當您滾動到它時文字會向上滑動？ （請參閱蘋果網站）因為它太常見了，你會認為這個問題會有很多答案，對嗎？但是，在瀏覽了許多線上教學後，我找不到出現在滾動上的動畫，所以我自己製作了。

HTML（噹噹！！！）

HTML 相當簡單。只要建立一個元素

一些文字

並附上課程>

完整的 HTML（請注意，您可以更改元素。為了簡單起見，我使用了

。）：

這是怎麼回事？ .animate-scroll 類別聲明動畫。這是實際製作動畫的程式碼。您可以製作另一個動畫，但我製作了一個上滑淡入動畫，因為這是我見過的最常見的動畫。然而，.animate-scroll.visible 顯示動畫結束時元素的狀態。如果您更改 .animate-scroll，您也應該更改它。例如，如果要變更大小，則應輸入 size:100%;或什麼的。但是，如果您只是想要一個有關如何執行此操作的簡單教程，那麼請不要更改任何內容。

JavaScript

複製這個簡單的 JavaScript：

哇！這是很多程式碼！發生什麼事了！讓我們一步一步地分解它。
首先， document.addEventListener('DOMContentLoaded', () => 正在偵測內容是否已載入。這只是​​執行「函數」。
const elements = document.querySelectorAll('.animate-scroll');這樣就找到了類別。如果您要變更 HTML 和 CSS 的類，也請變更此設定。
constobserver = new IntersectionObserver((entries) => {entries.forEach(entry =>;這會偵測元素是否在視口中。如果不在視口中，則不會對其進行動畫處理。
if (entry.isIntersecting) {entry.target.classList.add('visible');} 這會偵測動畫是否結束。如果是，則會將 .visible 加入 CSS 中。這就是它存在的原因！
閾值：0.9 這會計算動畫之前頁面上的內容量。 0 是像素一到達頁面。 1 是當它位於頁面上方大約 25% 時。 2 約為 50%...我喜歡將其保持在 0.9 左右，以便用戶看到動畫而不會隱藏文字太久。
elements.forEach(element => {observer.observe(element); 這只是觀察元素。解釋起來毫無意義。它在頁面上嗎???這可以處理這個問題。

最終代碼...

你懶得看我精彩的解釋嗎？這是全部程式碼。

HTML：

JavaScript：

就是這樣！我希望你喜歡這個深入探討。如果您有任何問題、意見或只是想與寫這篇文章的名人交談，請發表評論。我很樂意看到您的建議！

感謝您的閱讀，CodeMonster

以上是如何使用 JavaScript 和 CSS 製作滾動動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！