継ぎ目なく回る帯を作る。終わりと始まりを同じにするだけ

• 繰り返す素材は、最後のコマと最初のコマが同じでなければならない
• 並びを2組置いて、1組ぶんだけ流す
• 目分量で作ると、1周ごとに必ず飛ぶ

サイトの見出し下やSNSのヘッダーに敷く、流れ続ける帯を作った。考え方は単純だが、ずれると一目で分かる。

何が難しいのか

繰り返し再生される動画は、最後のコマの次に最初のコマが来る。この2つが違っていると、1周ごとに画面が飛ぶ。

1回しか見ないなら気づかないが、延々と流れる帯では必ず目に付く。飛んでいる位置を見るために何周も見ることになり、内容が頭に入らない。

やり方は2組置くだけ

同じ文字の並びを2組、横につなげて置く。そして動画全体で、ちょうど1組ぶんの幅だけ流す。

1組ぶん流れた時点で、2組目が1組目のあった位置に来ている。つまり見た目が開始時とまったく同じになる。これで継ぎ目が消える。

移動量は割合で書く

幅を数字で持つと、文字を1つ増やしたときに合わなくなる。全体幅を200%にして、移動量を50%にした。

translate: `${-(frame / durationInFrames) * 50}% 0px`

これなら文字の数や長さが変わっても、勝手に合う。帯に載せる言葉を差し替えても、継ぎ目の調整は要らない。

目分量だと必ずずれる

最初は「だいたいこのくらい」で移動量を決めた。プレビューでは問題なく見えた。

書き出して繰り返し再生したら、1周ごとに文字がわずかに飛んでいた。1ピクセルのずれでも、繰り返すと目に付く。割合で計算し直したら完全に消えた。

速さの決め方

4秒で1周にした。

• 速いと文字が読めない
• 遅いと止まって見えて、流す意味がなくなる
• 文字が読める速さの上限が、そのまま速さの上限になる

読ませたいなら遅く、雰囲気だけなら速くてよい。何のための帯かで決まる。今回は言葉を読ませたいので、遅めにした。

長さを短くできる

継ぎ目がないなら、動画そのものは短くてよい。4秒のファイルを繰り返し再生すれば、何分でも流せる。

ファイルは72KBで済んだ。30秒ぶん書き出すより、4秒を繰り返すほうが圧倒的に軽い。ページに置く素材では、この差が効く。

縦横比を用途に合わせる

1920×400という細長い比率にした。普通の16対9で作ると、上下に使わない余白ができる。

使う場所の形で書き出せば、置いたときに切る必要がない。比率は自由に決められるのは、コードで作る利点の1つだった。

どこで使うか

作ってみて、使い道が3つあった。

• 記事の見出し下に敷く帯
• SNSのプロフィール用ヘッダー
• 別の動画の背景として重ねる

3つ目は思っていなかった使い方だ。継ぎ目がない素材は、どんな長さの動画にも後ろに敷ける。1本作っておくと、別の動画を作るときの部品になる。

文字を増やすときの注意

並べる言葉を4つから6つに増やしても、割合で書いてあるので継ぎ目は崩れない。ただし1周に要する時間は変わらないので、その分だけ流れが速くなる。

読ませたいなら、言葉を増やしたときは動画の長さも伸ばす。ここは自動では決まらないので、増やすたびに見て決めている。

背景は黒にした

サイトは白地だが、帯は黒地に白文字にしている。

白地のページに白地の帯を置くと、どこからどこまでが帯か分からない。帯は「別の層」だと分かる色にする。周囲と同じ色にすると、流れている理由が伝わらない。

確認は繰り返し再生で

継ぎ目があるかどうかは、1回再生しただけでは分からない。3周以上させて初めて目に付く。

ブラウザで繰り返し再生の指定を付けて、しばらく眺めるのがいちばん確実だった。書き出したファイルを編集ソフトで見ても、1周で止まるので判断できない。

まとめ

ループ素材は、終わりと始まりを一致させるという1点だけを守ればよい。2組置いて1組ぶん流す。この形にしてしまえば、中身を差し替えても崩れない素材になった。