我對 html 和 css 編碼非常陌生，只是在做一個視頻課程來學習基礎知識。昨天我在網站https://www.axelspringer.com/de/的徽標/導航欄中看到了這個非常酷的影片。當您向下滾動時，它看起來像是洗掉了一些字母，并且在頂部位置它們又回來了。
我在 chrome 中查看了開發人員工具，只找到了帶有它們的類的 span 選擇器，其中的文本正在改變自己。
有人可以解釋我在哪里可以找到這種效果的 chrome 開發人員工具或它是如何制作的嗎？
謝謝！菲利普（希望這不是一個愚蠢的問題）
uj5u.com熱心網友回復：
要在滾動時觸發影片，您需要 Javascript。然后對于影片，您可以使用 CSS 或 Javascript。本網站使用 Javascript（見下面的代碼）。因此，該站點正在檢查您是否滾動，如果是，它會更改一些類并運行 JS 代碼來更改文本。您可以在這里了解 CSS 和 JS 版本的作業原理 - https://css-tricks.com/snippets/css/typewriter-effect/，或者只是在互聯網上搜索更多教程。
key: "handleScrollDown",
value: function () {
var e = this,
t = 0 === window.scrollY,
n = t != this.isTopMode;
(this.isTopMode = t),
n && t
? window.requestAnimationFrame(function () {
e.element.classList.remove("u-header--scrolled-down"),
e.element.classList.add("u-header--scrolled-top"),
document.body.classList.remove("u-body--header-scrolled-down"),
document.body.classList.add("u-body--header-scrolled-top"),
e.element.querySelector(".u-logo__text").getLogoWriter && e.element.querySelector(".u-logo__text").getLogoWriter().setText("axel springer");
})
: n &&
!t &&
window.requestAnimationFrame(function () {
e.element.classList.add("u-header--scrolled-down"),
e.element.classList.remove("u-header--scrolled-top"),
document.body.classList.add("u-body--header-scrolled-down"),
document.body.classList.remove("u-body--header-scrolled-top"),
e.element.querySelector(".u-logo__text").getLogoWriter && e.element.querySelector(".u-logo__text").getLogoWriter().setText("a");
});
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485749.html
標籤：javascript html css