日別アーカイブ: 2021-02-27

CSSでカウントリーダー

レトロ映画風カウントリーダー

かつて、映画は娯楽の王様と言われていました。映画の冒頭、ロケット打ち上げ時のカウントダウンのように、10秒程度の『カウントリーダー』が流れるのが通例でした。

ハリウッド映画では100%映し出されますが、邦画では富士山や波の風景などが流れたように記憶しています。

以下はインターネットで見つけたサンプル動画です。見るボタンをクリックして閲覧し10秒後にはまた、戻ってきてください。再生ボタンを利用した方がいいようです。

カウントリーダーは動画形式ですぐれた作品がインターネット上にあふれていますが、メッセージを追加することは容易ではありません。そこで今回、CSSとHTMLによる映画フィルムが横移動する感じの10秒カウントリーダーを作りました。原本の「映画の上映開始っぽいカウントダウンのCSSアニメーションサンプル」を土台に築き上げました。

 

フィルムが縦(上下)方向に流れるのがほとんどですが、斬新デザインの横移動にしました。動きを制御する場合、JavaScriptと併用する方式がありますが今回、意識的にCSSだけにしてあります。

再生ボタンはありませんのでブラウザの再ロードボタンをクリックすれば何度でも動作します。

10

9

8

7

6

5

4

3

2

1

🎥
5さいの たんじょうび おめでとう
©2021 TacM, Ver0.01

あとがき

画像の横縦比率は16:9です。最新のデジカメやスマホ対応にしてあります。

カウントリーダーが目立つと本文が貧弱 化しますのでそこそこの機能でいいのではないでしょうか。

コロナ禍ではありますが、卒業式、入学式、結婚式などの記念作品に応用できます。お祝いのメッセージはソースコードを修正します。