marqueeとは
<marquee>はスクロールする領域を挿入できるHTMLタグ。
昔のWebサイトではよく使用されていたが、現在は非推奨タグとなっているため使用されているケースは少ない。
marqueeは右から表示されて、すべてが左の外側に流れるまでループ再生されない。
最初から左端に先頭を表示させることもできず使い勝手も悪い。
<style> marquee > div { display: inline-block; margin-right: 70px; font-size: 70px; } </style> <marquee scrollamount="20" scrolldelay="0"> <div>🍣</div> <div>🍱</div> <div>🍔</div> <div>🍟</div> <div>🧋</div> <div>🍣</div> <div>🍱</div> <div>🍔</div> <div>🍟</div> <div>🧋</div> </marquee>
そのため、現在はJavaScriptで無限スクロールを実装しているWebサイトが多いが、HTMLとCSSだけでも以下のように実装できる。
※ iwb.jpはWordPressを利用しているので絵文字ではなくimgタグに置換されているが、どちらでも実装可能。
HTMLとCSSだけで無限スクロール
HTMLとCSSだけで無限スクロールするにはまずHTMLで以下のような構造のHTMLを作成する。
.scroll-parent内には.scroll-childが2つあり、1つ目の.scroll-childが最初に表示されて、CSSアニメーションで右から左に動かす。
次に2つ目の.scroll-childを右から左に動かして後続は1つ目を右から左に動かして無限ループさせる。
<div class="container"> <div class="scroll-parent"> <div class="scroll-child"> <div>🍣</div> <div>🍱</div> <div>🍔</div> <div>🍟</div> <div>🧋</div> </div> <div class="scroll-child"> <div>🍣</div> <div>🍱</div> <div>🍔</div> <div>🍟</div> <div>🧋</div> </div> </div> </div>
CSSは.scroll-childにCSSアニメーションを5秒、linear、infiniteで設定して無限ループさせています。
.scroll-childのanimation-nameは1番目をfirst、2番目をsecondとしています。
1番目はleftを0%から-100%、2番目を100%から0%にCSSアニメーションを設定することで無限ループを実装しています。
.container {
overflow: hidden;
width: 100%;
height: 70px;
}
.scroll-parent {
overflow: hidden;
position: relative;
width: 100%;
height: inherit;
}
.scroll-child {
display: flex;
align-items: center;
justify-content: space-around;
position: absolute;
left: 0%;
top: 0%;
width: inherit;
height: inherit;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.scroll-child > div {
font-size: 70px;
}
.scroll-child:nth-child(1) {
animation-name: first;
}
.scroll-child:nth-child(2) {
animation-name: second;
}
@keyframes first {
from {
left: 0%;
}
to {
left: -100%;
}
}
@keyframes second {
from {
left: 100%;
}
to {
left: 0%;
}
}
ちなみにleftプロパティをすべてrightに変えれば無限スクロールを左から右に変更できます。