如何在 2022 年選取元素（最佳實踐）
已發表: 2022-08-23本文將討論在現代網頁設計中製作移動選取框元素的最佳方法。
選框是文本和/或視覺元素（如圖像）的無限部分，可自動水平滾動。
儘管官方 HTML <marquee> 元素已被貶低並強烈建議不要使用，但用於為網頁增添趣味的滾動、連續元素的整體效果在 2022 年仍然活躍且良好，出現在許多時尚網站中。
有些人甚至仍然使用 Marquee 元素，儘管（再次）不鼓勵使用，但所有瀏覽器仍然支持該元素。 例如，這是使用 HTML 選取框創建的經典彈跳 DVD“屏幕保護程序”。
這並不聰明，但它仍然有效。 2022 年避免使用此元素的原因很明確：
- 它不是真的可以訪問
- 它已 100% 折舊，並且可以（並且可能會在某個時候）刪除對它的支持
- 它從來都不是真正的 HTML 元素（不是任何標準的一部分）
然而，我們一直是 Isotropic 的字幕粉絲。
看看許多流行的 Awwwards 網站，您會看到文本、圖像或兩者的組合水平移動，如下所示：
這是一個演示選框
當然，將關鍵任務信息放在滾動或動畫部分中絕不是一個好主意。 但是對於上面的示例，它看起來很酷，可以區分網站並使其令人難忘。 明智而適度地使用它。
選框非常酷，我們甚至發布了一個有用的工具，它會使用 CSS 框陰影自動生成滾動文本的“ticker”樣式部分。 這很酷，但我認為本文討論的方法更好。
製作字幕演示的代碼來自 Ryan Mulligan 的 CodePen，這（可能）是 2022 年製作字幕效果的最佳方式。他還在他的博客 https://ryanmulligan.dev/ 中寫了有關此代碼的內容博客/css-marquee。
它是可訪問的（支持prefers-reduced-motion），無限的，允許任何類型的html元素，並且是輕量級且易於實現的。
它也是用 100% CSS 和無 JS 製作的。
<div class="marquee">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzqQ&ixlib=b-1.0.2'1'>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=b-1.'0.02&ixlib='>&q='4
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-q=4.0.01'1'1'&ixlib=rb-q=4.02.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-q=4.2'0.0.
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzqQ&ixlib=b-1.0.2'1'>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=b-1.'0.02&ixlib='>&q='4
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-q=4.0.01'1'1'&ixlib=rb-q=4.02.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-q=4.2'0.0.
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>不飛濺的狗</p>
<p aria-hidden="true">Unsplash 的狗</p>
<p aria-hidden="true">Unsplash 的狗</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>不飛濺的狗</p>
<p>不飛濺的狗</p>
<p>不飛濺的狗</p>
</div>
</div>
<div class="marquee marquee--reverse">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=&rb-4=2'1'1'>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.'402MDE&ixlib='&q='&q=
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.'402MDE&ixlib='&q='&q='&q=
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-q=4.02'1 '1'0.
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=&rb-4=2'1'1'>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.'402MDE&ixlib='&q='&q=
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.'402MDE&ixlib='&q='&q='&q=
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-q=4.02'1 '1'0.
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div> @import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
box-sizing：邊框框；
}
身體 {
最小高度：100vh；
}
身體 {
--空間：2rem；
顯示：網格；
對齊內容：居中；
溢出：隱藏；
間隙：var（--空格）；
寬度：100%；
font-family: "Corben", system-ui, sans-serif;
字體大小：1.5rem；
行高：1.5；
}
.選框{
--持續時間：60s；
--gap: var(--space);
顯示：彎曲；
溢出：隱藏；
用戶選擇：無；
間隙：var（--gap）；
變換：skewY(-3deg);
}
.marquee__group {
彈性收縮：0；
顯示：彎曲；
對齊項目：居中；
justify-content：空間環繞；
間隙：var（--gap）；
最小寬度：100%；
動畫：滾動 var(--duration) 線性無限；
}
@media (prefers-reduced-motion: reduce) {
.marquee__group {
動畫播放狀態：暫停；
}
}
.marquee__group img {
最大寬度：箝位（10rem，1rem + 28vmin，20rem）；
縱橫比：1；
適合對象：封面；
邊界半徑：1rem；
}
.marquee__group p {
背景圖像：線性漸變（
75度，
hsl(240度 70% 49%) 0%,
hsl(253度 70% 49%) 11%,
hsl(267度 70% 49%) 22%,
hsl(280度 71% 48%) 33%,
hsl(293度 71% 48%) 44%,
hsl(307度 71% 48%) 56%,
hsl(320度 71% 48%) 67%,
hsl(333度 72% 48%) 78%,
hsl(347度 72% 48%) 89%,
hsl(0度 73% 47%) 100%
);
-webkit-background-clip：文本；
-webkit-text-fill-color：透明；
}
.marquee--邊框{
邊框塊：3px 實心dodgerblue；
填充塊：0.75rem；
}
.marquee--反向 .marquee__group {
動畫方向：反向；
動畫延遲：計算（var（--duration）/-2）；
}
@keyframes 滾動 {
0% {
變換：翻譯X（0）；
}
100% {
變換： translateX(calc(-100% - var(--gap)));
}
}
讓我們來看看它是如何創建的以及為什麼它如此出色。
這是一個概述，在我們查看所有代碼之前：
- 我們可以輕鬆控制滾動效果的速度和方向。 為了速度，我們設置
.marquee--reverse類。 - 它是模塊化的——你可以擁有任意數量的組，方法是使用
.marquee__group類將內容包裝在 div 中，使用.marquee包裝內部內容。 - 由於它使用 CSS 變量和箝位，因此調整大小具有響應性和流暢性。
- 如果 CSS 的 prefers-reduced-motion 設置為 reduce，它可以使用 aria 標籤訪問並暫停。
- 移動是使用關鍵幀的標準 CSS 動畫（因此您可以根據需要在懸停時暫停）。 根本沒有JS。
- 它也很漂亮的複制/粘貼。 只需更換您的內容，實現 HTML 和 CSS，您就會擁有一個很酷的小字幕。
確實做得很好，（imo）應該是 2022 年實現選取框效果的標準方式。
這是HTML：
在演示中，我們可以看到三個選取框。 第一個和第三個使用.marquee--reverse類反轉。 它們具有標準速度，並包含圖像。
第二個（中間一個）是所有文本，並使用自定義類實現邊框。 它還具有由 style 屬性設置的較慢持續時間： .
您還會注意到.marquee div 中基本上存在重複項，除了帶有 aria 標記外，它們是相同的。
這是為了使動畫無縫無限，同時也能夠適應不同的視口比率（當我們查看 CSS 時會詳細說明）。
這可以通過aria-hidden="true"訪問，它會從可訪問性樹中刪除重複的內容。
此外，圖像直接從 Unsplash 提供。 您可能會發現此資源很有趣：如何通過 URL 生成隨機圖像（Web 開發）
總而言之，它是一個優雅、簡單的 HTML 結構。
現在讓我們看看 CSS
這是 CSS（直接從 CodePen 中提取）：
我們可以看到以下內容：
- 一切都使用 REM、變量和箝位，這意味著效果是流暢的，並且會對屏幕尺寸和瀏覽器設置做出反應。
- 動畫是 100% CSS。 這是通過
.marquee__group中的“animation: scroll var(--duration) linear infinite;”行來實現的。 動畫是無限的、線性的和命名的滾動。 根持續時間由--duration變量控制，可以覆蓋該變量以控制 HTML 標記中特定組的速度（如上所述）。 - Scroll是一個基本的變換，平移X。
- 要反轉動畫，我們只需在
.marquee--reverse .marquee__group類中添加“animation-direction: reverse;”。 - 我們使用 calc 和 --gap 來處理大部分間距。 這使事情變得流暢，您可以更改 Gap 以滿足您的需求。
- 有一個傾斜 (3%) 效果使它成為對角線，可以將其移除以使其 100% 水平。
- 它是可訪問且負責任的，因為如果設置了 prefers-reduced-motion: reduce （了解如何在此處進行測試），它就不會移動。
基本上，它做的一切都非常好，並且是在 2022 年實現類似滾動選框效果的最佳方式。
要實現，您只需將 HTML 添加到頁面，換出文本/圖像，然後將 CSS 添加到全局樣式中。
您可以使用變量，但實際上這非常即插即用......您不需要更改太多！