2022 年に要素をマーキーする方法 (ベスト プラクティス)
公開: 2022-08-23この記事では、最新の Web デザインで動くマーキー要素を作成する最良の方法について説明します。
マーキーは、自動的に水平方向にスクロールする、テキストおよび/またはビジュアル要素 (画像など) の無限のセクションです。
公式の HTML <marquee> 要素は減価償却され、使用が強く推奨されていませんが、Web ページにスパイスを加えるために使用されるスクロール、連続要素の全体的な効果は 2022 年も健在で、多くのトレンディな Web サイトに表示されています。
Marquee 要素をまだ使用しているものもありますが、これは (再び) 使用が推奨されていませんが、すべてのブラウザーでサポートされています。 たとえば、これは HTML マーキーで作成された古典的なバウンス DVD「スクリーンセーバー」です。
これはスマートではありませんが、それでも機能します。 2022 年にこの要素の使用を避けるべき理由は明らかです。
- 本当にアクセスできない
- それは 100% 減価償却されており、そのサポートは削除される可能性があります (おそらくある時点で削除される予定です)。
- そもそも実際の HTML 要素ではありませんでした (標準の一部ではありません)。
しかし、私たちは常に Isotropic のマーキーのファンでした。
トレンディな Awwwards の Web サイトの多くを見ると、次のように、テキスト、画像、または両方の組み合わせが水平方向に移動していることがわかります。
これはデモ マーキーです
もちろん、重要な情報をスクロールやアニメーションのセクションに入れることは決して良い考えではありません。 しかし、上記の例のようなものは、見栄えがよく、サイトを差別化し、印象的なものにします。 賢明かつ適度に使用してください。
マーキーは非常にクールです。CSS ボックス シャドウを使用してスクロール テキストの「ティッカー」スタイル セクションを自動的に生成する便利なツールを公開しました。 クールですが、この記事で説明したアプローチはさらに優れていると思います。
そのマーキー デモを作成するためのコードは、Ryan Mulligan によるこの CodePen からソースされています。これは、2022 年にマーキー効果を作成するための (おそらく) 最良の方法です。彼はまた、このコードについてブログ https://ryanmulligan.dev/ブログ/css-マーキー。
アクセス可能 (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=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-q=0'0'&ixlib=rb-0'0.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=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=1'&w=1'0'&w=0'8&w=rb-1.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=1'&w=rb-1.&ixlib=1'&w=0'8'&w=rb-1.
</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=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-q=0'0'&ixlib=rb-0'0.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=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=1'&w=1'0'&w=0'8&w=rb-1.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=1'&w=rb-1.&ixlib=1'&w=0'8'&w=rb-1.
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>Unsplash の犬たち</p>
<p aria-hidden="true">Unsplash の犬たち</p>
<p aria-hidden="true">Unsplash の犬たち</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>Unsplash の犬たち</p>
<p>Unsplash の犬たち</p>
<p>Unsplash の犬たち</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=rbq=0'8'0.4>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=1'&w=1.0'&w=rb-1.
<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=rbq=0'8'0.4>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=1'&w=1.0'&w=rb-1.
<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");
* {
ボックスサイズ: ボーダーボックス;
}
体 {
最小高さ: 100vh;
}
体 {
-- スペース: 2rem;
表示: グリッド;
コンテンツの整列: センター;
オーバーフロー: 非表示;
ギャップ: var(--スペース);
幅: 100%;
font-family: "Corben", system-ui, sans-serif;
フォントサイズ: 1.5rem;
行の高さ: 1.5;
}
。大テント {
-- 持続時間: 60 秒;
--gap: var(--スペース);
表示: フレックス;
オーバーフロー: 非表示;
ユーザー選択: なし;
ギャップ: var(--ギャップ);
変換：skewY（-3度）;
}
.marquee__group {
フレックスシュリンク: 0;
表示: フレックス;
整列項目: センター;
justify-content: 前後にスペース。
ギャップ: var(--ギャップ);
最小幅: 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 {
アニメーションの方向: 逆;
アニメーション遅延: calc(var(--duration) / -2);
}
@keyframes スクロール {
0% {
変換: translateX(0);
}
100% {
変換: translateX(calc(-100% - var(--gap)));
}
}
これがどのように作成されたのか、そしてなぜそれがそれほど素晴らしいのかを見てみましょう.
すべてのコードを見る前に、概要を以下に示します。
- スクロール効果の速度と方向を簡単に制御できます。 速度については、
.marquee--reverseのクラスを使用します。 - モジュラーです - コンテンツを
.marqueeのクラスで div にラップし、内部コンテンツを.marquee__groupでラップすることにより、必要な数のグループを持つことができます。 - CSS 変数とクランプを使用するため、サイジングはレスポンシブで流動的です。
- CSSのprefers-reduced-motionがreducedに設定されている場合、ariaラベルと一時停止を使用してアクセスできます。
- 動きは、キーフレームを使用する標準の CSS アニメーションです (必要に応じてホバーで一時停止できます)。 JSはまったくありません。
- また、かなりのコピー/貼り付けです。 コンテンツを交換し、HTML と CSS を実装するだけで、クールで小さなマーキーが完成します。
これは非常によくできており、(imo) 2022 年にマーキー効果を実装する標準的な方法になるはずです。
HTMLは次のとおりです。
デモでは、3 つのマーキーが表示されます。 1 番目と 3 番目は.marquee--reverseのクラスで反転されます。 標準速度で、画像が含まれています。
2 番目 (中央のもの) はすべてテキストで、カスタム クラスを使用して境界線を実装します。 また、スタイル属性によって設定されたより遅い持続時間もあります: .
また、 .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;.marquee__group; 」行で実装されます。 アニメーションは、無限、線形、および名前付きスクロールです。 ルート期間は、--duration変数によって制御されます。この変数は、HTML マークアップ (上記) の特定のグループの速度を制御するために上書きできます。 - スクロールは基本的な変換であり、X を変換します。
- アニメーションを反転するには、
.marquee--reverse .marquee__groupクラスに「animation-direction: reverse;」を追加するだけです。 - 間隔の大部分に calc と --gap を使用しています。 これにより物事が流動的になり、ニーズに合わせてギャップを変更できます。
- 斜めにするスキュー (3%) 効果があり、これを削除して 100% 水平にすることができます。
- prefers-reduced-motion: reduce が設定されている場合は移動しないため、アクセス可能で責任があります (テスト方法については、こちらをご覧ください)。
基本的に、これはすべてがうまく機能し、2022 年にスクロール マーキーのような効果を実装するための最良の方法です。
実装するには、HTML をページに追加し、テキスト/画像を交換し、CSS をグローバル スタイルに追加するだけです。
変数をいじることはできますが、現実的には、これはかなりプラグ アンド プレイです。変更する必要はあまりありません。