CSSのbackground-imageプロパティ等を使ったムービータイムライン風UIの作り方

こんにちわ。nap5です。

動画編集アプリにあるようなムービータイムラインUIをWebで表現するとなった時、今回使用するbackground-imageプロパティ等を使うとそれっぽく表現できたので、紹介したいと思います。

https://developer.mozilla.org/ja/docs/Web/CSS/background-image

background-image - CSS: カスケーディングスタイルシート | MDN

今回は一枚一枚の画像の配置にbackground-positionプロパティを、画像の繰り返し制御にbackground-repeatプロパティを使用しました。

https://developer.mozilla.org/ja/docs/Web/CSS/background-position

background-position - CSS: カスケーディングスタイルシート | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat

background-repeat - CSS: カスケーディングスタイルシート | MDN

完成するイメージは以下になります。

CodePenに動作確認できるサンプルを置きました。

実装についてですが、まず、background-imageプロパティにダミー画像URLを指定します。複数のURLを生成する場合はurlを複数記載します。

次に配置する画像の横幅を事前に求めておきます。今回だと256pxになります。

background-positionのプロパティは値を2つ並べて使用する際には左からx座標、y座標として解釈されます。なので、x軸方向にびっしり敷き詰めたい場合は、対象のDOMの左上を基準に0px 0px、256px 0px、512px 0pxといった値をパターン生成すればよいことになります。

最後に並べた画像が繰り返さないようにbackground-repeatプロパティにno-repeatを指定して完成です。

おまけとして、ダミー画像URLを生成する際に使用したちょっとしたスクリプトも載せておきます。

ダミー画像に関しては以下のサイトを使用させていただきました。

Placehold.jp | 簡単！ダミー画像作成

以下をa.jsファイルとして保存

function randomColor() {
 return Math.floor(Math.random() * 16777215).toString(16);
}

for (let index = 0; index < 16; index++) {
 console.log(`https://placehold.jp/${String(randomColor())}/ffffff/256x256.png`);
}

コンソールで以下のコマンドを実行

IN

$ node a.js | xargs -I@ echo "url(@),"|xargs|sed 's/,$//g'

OUT

url(https://placehold.jp/b7415b/ffffff/256x256.png), url(https://placehold.jp/dd636f/ffffff/256x256.png), url(https://placehold.jp/d98f32/ffffff/256x256.png), url(https://placehold.jp/880ffc/ffffff/256x256.png), url(https://placehold.jp/630f28/ffffff/256x256.png), url(https://placehold.jp/7d911/ffffff/256x256.png), url(https://placehold.jp/bb8da3/ffffff/256x256.png), url(https://placehold.jp/6ed259/ffffff/256x256.png), url(https://placehold.jp/37096d/ffffff/256x256.png), url(https://placehold.jp/ae4c5d/ffffff/256x256.png), url(https://placehold.jp/41f3e7/ffffff/256x256.png), url(https://placehold.jp/59f5cb/ffffff/256x256.png), url(https://placehold.jp/2f47b6/ffffff/256x256.png), url(https://placehold.jp/93974/ffffff/256x256.png), url(https://placehold.jp/2d5c6f/ffffff/256x256.png), url(https://placehold.jp/d62e3f/ffffff/256x256.png)

簡単ですが、以上になります。