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に変えれば無限スクロールを左から右に変更できます。
