MARQUEEなしでHTML5とCSS3でスクロール可能なコンテンツを作成する

長い間HTMLを書いているあなたの人は、その要素を覚えているかもしれません。 これはブラウザ固有の要素で、画面全体にスクロールするテキストのバナーを作成しました。 この要素はHTML仕様に追加されておらず、サポートはブラウザによって大きく異なります。 人々はしばしば、この要素の使用について正と負の両方について非常に強い意見を持っていました。 しかし、あなたがそれを愛しているか嫌っていたとしても、それはボックスの境界をはみ出したコンテンツを目に見えるようにする目的を果たしました。

それが視覚的な効果と考えられているので、それがHTMLを定義するものではなく、構造を定義するという理由で、ブラウザによって完全に実装された理由の一部は、 代わりに、視覚効果やプレゼンテーション効果をCSSで管理する必要があります。 CSS3では、マーキーモジュールを追加して、ブラウザがどのようにマーキーエフェクトを要素に追加するかを制御します。

新しいCSS3のプロパティ

CSS3には、オーバーフロースタイル、マーキースタイル、マーキー再生回数、マーキー方向、マーキー速度の5つの新しいプロパティが追加されています。

オーバーフロースタイル
オーバーフロースタイルのプロパティ（CSSオーバーフローの記事でも説明しました）は、コンテンツボックスのオーバーフローするコンテンツの優先スタイルを定義します。 マーキーラインまたはマーキーブロックに値を設定すると、コンテンツが左右（マーキーライン）または上/下（マーキーブロック）にスライドイン/アウトされます。

マーキースタイル
このプロパティは、コンテンツをどのように表示（および出力）するかを定義します。

スクロール、スライド、交互のオプションがあります。 スクロールは、画面から完全に離れたコンテンツから開始し、すべてが完全に画面から完全に外れるまで、可視領域を移動します。 スライドは、コンテンツが画面から完全に離れてから開始し、コンテンツが画面上に完全に移動し、画面にスライドするコンテンツがなくなるまで移動します。

最後に、交互に前後にスライドするコンテンツを左右にバウンスさせます。

マーキープレイカウント
MARQUEE要素を使用することの欠点の1つはマーキーが決して停止しないことです。 しかし、スタイルプロパティmarquee-play-countでは、マーキーを設定して、特定の回数だけコンテンツをオン/オフすることができます。

マーキー方向
コンテンツを画面上でスクロールする方向を選択することもできます。 順方向および逆方向の値は、オーバーフロースタイルがマーキーラインの場合はテキストの方向性に、オーバーフロースタイルがマーキーブロックの場合は上または下に向いています。

マーキー方向の詳細

マーキースピード
このプロパティは、コンテンツが画面上でスクロールする速度を決定します。 値は低速、正常、高速です。 実際の速度は、コンテンツとブラウザに表示される内容によって異なりますが、値が遅くなければならないのは通常よりも遅く、遅い場合です。

マーキープロパティのブラウザサポート

CSSマーキー要素を機能させるには、 ベンダープレフィックスを使用する必要があります。 彼らは以下の通りです：

最後のプロパティでは、マーキーの画面上でコンテンツがスクロールするときのステップの大きさまたはサイズを定義できます。

マーキーを動作させるには、ベンダープレフィックスの値を最初に配置してから、CSS3の仕様値に従ってください。 たとえば、200x50のボックス内でテキストを左から右に5回スクロールするマーキー用のCSSを次に示します。

{
幅：200px; 高さ：50px; ホワイトスペース：nowrap;
オーバーフロー：隠された;
overflow-x：-webkit-marquee;
-webkit-marquee-direction：フォワード;
-webkit-marquee-style：scroll;
-webkit-marquee-speed：正常です。
-webkit-marquee-increment：小さい;
-webkit-marquee-repetition：5;
overflow-x：マーキーライン。
マーキー方向：前方;
マーキースタイル：スクロール;
マーキー速度：正常;
マーキープレイ回数：5;
}