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

HTML（當當當?。。。?

HTML 相當簡單。只需創(chuàng)建一個元素

一些文字

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

。）：

<p>



<h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

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

JavaScript

復制這個簡單的 JavaScript：

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

哇！這是很多代碼！發(fā)生什么事了！讓我們一步一步地分解它。
首先， document.addEventListener('DOMContentLoaded', () => 正在檢測內容是否已加載。這只是運行“函數(shù)”。
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：

<p>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript：

<p>



<h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

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

感謝您的閱讀，CodeMonster

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