您是否見過基本上每個(gè)很酷的公司網(wǎng)站，并注意到當(dāng)您滾動(dòng)到它時(shí)文本會(huì)向上滑動(dòng)？ （參見蘋果網(wǎng)站）因?yàn)樗Ｒ娏?，你?huì)認(rèn)為這個(gè)問題會(huì)有很多答案，對(duì)嗎？但是，在瀏覽了許多在線教程后，我找不到出現(xiàn)在滾動(dòng)上的動(dòng)畫，所以我自己制作了。

HTML（當(dāng)當(dāng)當(dāng)?。。。?

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

一些文字

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

。）：

<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 類聲明動(dòng)畫。這是實(shí)際制作動(dòng)畫的代碼。您可以制作另一個(gè)動(dòng)畫，但我制作了一個(gè)上滑淡入動(dòng)畫，因?yàn)檫@是我見過的最常見的動(dòng)畫。然而，.animate-scroll.visible 顯示動(dòng)畫結(jié)束時(shí)元素的狀態(tài)。如果您更改 .animate-scroll，您也應(yīng)該更改它。例如，如果要更改大小，則應(yīng)輸入 size:100%;或者什么的。但是，如果您只是想要一個(gè)有關(guān)如何執(zhí)行此操作的簡單教程，那么請(qǐng)不要更改任何內(nèi)容。

JavaScript

復(fù)制這個(gè)簡單的 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', () => 正在檢測內(nèi)容是否已加載。這只是運(yùn)行“函數(shù)”。
const elements = document.querySelectorAll('.animate-scroll');這樣就找到了類。如果您要更改 HTML 和 CSS 的類，也請(qǐng)更改此設(shè)置。
constobserver = new IntersectionObserver((entries) => {entries.forEach(entry =>;這會(huì)檢測元素是否在視口中。如果不在視口中，則不會(huì)對(duì)其進(jìn)行動(dòng)畫處理。
if (entry.isIntersecting) {entry.target.classList.add('visible');} 這會(huì)檢測動(dòng)畫是否結(jié)束。如果是，則會(huì)將 .visible 添加到 CSS 中。這就是它存在的原因！
閾值：0.9 這會(huì)計(jì)算動(dòng)畫之前頁面上的內(nèi)容量。 0 是像素一到達(dá)頁面。 1 是當(dāng)它位于頁面上方大約 25% 時(shí)。 2 約為 50%...我喜歡將其保持在 0.9 左右，以便用戶看到動(dòng)畫而不會(huì)隱藏文本太久。
elements.forEach(element => {observer.observe(element); 這只是觀察元素。解釋起來毫無意義。它在頁面上嗎???這可以處理這個(gè)問題。

最終代碼...

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

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);
}

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

感謝您的閱讀，CodeMonster

以上是如何使用 JavaScript 和 CSS 制作滾動(dòng)動(dòng)畫的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！