marqueeで電光掲示板風に文字を流す　⇒　トップページの作り込み8

Netscape Navigatorが出てくるところなど、時代を感じる。

あまりにも多用されたため「ダサイ」テクニックと評価され、「愛生会病院」がネタになったりして、このテクニックを使ったサイトはほぼ絶滅した。

今回、あえてこのテクニックを使ってみた。

まあ、ネタだ（笑）

marqeeタグを使わない

といいつつ、今回は、cssで実装した。

と言うのも、marqeeタグは非推奨になっている。

廃止
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

marquee: マーキー要素 (廃止) – HTML: HyperText Markup Language | MDNから引用

HTMLには修飾要素を含めないのだから、当然だ。

まずはHTMLは下記の通り。

<div id="amiens-12" class="amiens-font-noto">
<div>
        <span>きれいだけれど売れないホームページを、売れるホームページに変えます。</span><span>売るための施策をやり続けるお手伝いをします。</span><span>お客様に感動を与える仕組み作りをします。</span></div>
</div>

動かす文字部分をspanでインライン要素のまま分割しているのがミソだ。

cssはこうした。

#amiens-12{
min-height: 100%;
min-height: 100vh;
overflow: hidden;
background: url(https://amiens.jp/wp-content/uploads/2019/05/nayami-1x.jpg) center center;
background-size: cover;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
}
#amiens-12 div {
margin:0;
padding: 60vh 0 0 100vh;
font-size: 2rem;
color: #222;
white-space:nowrap;
display: inline-block;
animation-name:marquee;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
@keyframes marquee {
from   { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
#amiens-12 span {
margin-left: 8em;
padding: 1em;
background-color: rgba(256, 256, 256, 0.4);
font-family: 'Noto Serif JP', serif !important;
}

背景画像を敷いたりして長くなっているが、やっていることはanimationで動きを制御しているくらい。

割とシンプルに書ける。

分割したテキストごとに、半透明背景の上に文字が載った状態で流れていく。

marqueeで実現するよりは、見た目がちょっとましだろう。

関連