文字スクロールを2種類にしたい

今文字スクロールが1種類だけなのですが、これを2種類にしたいです。
最初にaaaaaaaが出てきて、なくなったらbbbbbを出し、bbbbbが消えたらまたaaaaaを出したいです。

html
1<div class="scroll">
2  <span>aaaaaaaaaaaaaaaaaa</span>
3</div>

css
1.scroll {
2	margin: auto;
3	max-width: 100%;
4	font-size : 80%;
5	line-height: 1.5em;
6	text-align : center;
7	border     : 1px solid #6e99bf;
8	color      : #fff;
9	background : #6e99bf;
10	overflow   : hidden;
11  }
12  .scroll span{
13	display     : inline-block;
14	padding-left: 100%;
15	white-space : nowrap;
16	line-height : 1em;
17	animation   : scrollAnime 20s linear infinite;
18  }
19  @keyframes scrollAnime{
20	  0% { transform: translateX(0)}
21	100% { transform: translateX(-100%)}
22  }
23

試したこと

これだと2行が一回で出てしまい、スクロールバー太くなってしまうのでダメです。

html
1<div class="scroll">
2  <span>aaaaaaaaaaaaaaaaaa</span>
3　<span>bbbbbbbbbbbbbbbbbbb</span>
4</div>

以下だと半角スペースは空くのですが、一緒に表示されてしまうのでこれも微妙です。

html
1<div class="scroll">
2  <span>aaaaaaaaaaaaaaaaaa&nbsp;bbbbbbbb</span>
3　
4</div>

よろしくお願いいたします

行動規範の内容に同意します

回答1件

ベストアンサー

このようなことをやりたい場合、いくつか工夫が必要です。

いわゆるIE時代におけるmarkeeのような表現だと思います。
まず、a側の表示とb側の表示をシームレスに無限ループでつなげるには、b側のスクロールが終了したあとa側の表示をオーバーラップさせるためのダミー要素が必要になります。
a側の要素と全く同じものをb要素のあとに配置しておく必要があります。

html
1<div class="scroll">
2  <span>aaaaaaaaaaaaaaaaaa</span>
3　<span>bbbbbbbbbbbbbbbbbbb</span>
4  <span>aaaaaaaaaaaaaaaaaa</span>
5<!--   綺麗にスクロールさせるには先頭と同じ内容のダミー要素が必要 -->
6</div>

div側については、spanをinline-blockで並べるとどうしても改行が発生します。
改行させないようdiv側のdisplayはflexにし、横1列表示を強制させます。
div要素の幅をspan要素の数*100vwにすることで、横幅がウィンドウ幅のspanを3つ分一列に並べることができます。
あとはdiv側をtranslateを使って移動させることでスクロールしているように見せかけることができます。
この際、200vw分動いた時点で元の位置に戻すようにすればaとbが交互にスクロールしてくるように見えます。

css
1.scroll {
2/*   flexで内包要素を横1列に並べる */
3    display: flex;  
4    margin: auto;
5/*   span要素数*100vm分の幅を用意 */
6    width: 300vw;
7    border     : 1px solid #6e99bf;
8    color      : #fff;
9    background : #6e99bf;
10    overflow   : hidden;
11/*   スクロールのアニメーションはdiv要素で実施 */
12    animation   : scrollAnime 10s linear infinite;
13  }
14  .scroll span{
15    display     : inline-block;
16    text-align: center;
17/*     スクロールする内容物はウィンドウ横幅に合わせる */
18    width: 100vw;
19    white-space : nowrap;
20    line-height : 1em;
21  }
22  @keyframes scrollAnime{
23      0% { transform: translateX(0)}
24/*     スクロールは200vm分で先頭に戻す */
25    100% { transform: translateX(-200vw)}
26  }