久々にHTMLタグの「
MDN仕様]1に記載されています。
Obsolete この機能は廃止されました。 この機能は廃止されました。ブラウザによってはまだ使えるかもしれませんが、いつ削除されてもおかしくないので、使用は控えてください。なるべく使わないでください。
またはW3C wikiに記載されています。
本当に使わないでください。
いくつかの記事を検索してみたところ、CSSの関連置換についての言及がありました。CSSの属性のようなものです。
marquee-play-count
marquee-direction
marquee-speed
のようなCSS属性がありますが、どうやらこれらは機能しないようです。2008年3には仕様の一部でしたが、2014年4に除外されました。
W3コンソーシアムが提案したCSS3 animationsを使う方法もありますが、メンテナンスが簡単な <marquee>
よりもずっと複雑な気がします。
また、JS alternatives もたくさんあり、ソースコードもたくさんあるので、自分のプロジェクトに追加して大きくすることができます。
私はいつも、"don't ever use marquee", "is obsolete" のようなことを読んでいます。そして、その理由がわからないのです。
そこで、どなたか私に、なぜ marquee は非推奨なのか、なぜそれを使うのは "危険なのか、最も簡単な代替は何か を説明していただけませんか?
例][7]を見ましたが、いい感じですね。ブラウザのサポートに必要なすべての接頭辞を使用すると、テキストの長さに応じて2つの値 (開始と終了のインデント) がハードコードされ、約20〜25行のCSSが必要になります。この解決策はあまり柔軟ではなく、これではbottom-to-top効果を作ることができません。
コンテンツは移動させない方がいいと思いますが、質問の答えにはなっていません。CSSを見てみてください。
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
ここにcodepenがあります。
編集です。
以下は、下から上へのcodepenです。
CSSで一度、クラスとループアニメーションを定義すれば、あとは必要な場所でそれを使うだけです。しかし、多くの人が言っているように、このタグが廃れつつあるのは、ちょっと迷惑な行為であり、その理由があります。
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>Scrolling text... </h3>
</div>