簡単なCSSとJSでエンドロールを構築

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

とあるプロジェクトでWEBページ内に動画を再生するコンテンツを作りました。
その際に、動画の最後は、関わったスタッフの名前を全て表示させる「スタッフロール」が欲しいとの声が上がり、簡易に実現させるために、映画のエンディングロールのような効果をCSSと若干のJSを使って構築してみました。
 

特にすごい技術というわけではないのですが、汎用性の高い考え方ができたので、まとめておくことにしました。
 

エンドロールのソースコード

まずは、映画エンドロールを簡易に作ってみます。
画面に600×400の黒幕を作って、数十行ある文字列を上に迫り上がるようにスクロールさせていきます。
 

 


 

簡単解説

スクロールは、cssのkeyframeアニメーションを使っているだけなのですが、簡易に行うために、今回はbottom値のコントロールでやっています。
 

何が簡易かというと、keyframeのfrom – toで最後が「bottom:100%;」になるといいわけで、スタート時に、画面下に位置していればいい状態です。
 

少し勉強になったのは、bottomの単位を初回は「px」で指定して、終了は「%」になっている点です。
 

cssでは、こうした単位が違ってもきちんと保管アニメーションが作れるという利点を利用しています。
 


 

Fromでのbottom値は、textエレメントの縦サイズを-(マイナス)値として、挿入して、Toに100%ということは、画面上部がエレメントのbottomになるので、上に流れるスクロールが完了になるというわけです。
 

今回のソースは、htmlファイル1つで完結しているので、サーバーに設置しなくても、そのままブラウザで表示すると実行されるので、確認も楽に行えます。
 

ちなみに、fromに「top:auto;」をいれているのは、汎用性を考慮して、topに値が入っていると、bottomの値が反映されなくなるため、topの値を無効にしている指定です。

応用

スタッフロール以外でも、ニコ動のように、文字が画面の左右に流れていくような効果も同じ考え方で汎用的な構築をすることができます。
 

その際のcss-keyframeは以下の通りです。参考までに載せておきます。
 

 

左から右に移動する場合は、起点をエレメントの幅サイズに-1を掛けた値をleftにpxで設置し、
右から左の場合は、同じ値をrightにpxで設置してあげると、アニメーションが可能になります。
 

cssのもう一つの利点として、javascriptでsetIntervalなどで行う処理よりも、軽くて負荷の少ないアニメーション構築ができる点です。
 

javascriptアニメーションは、msec指定をした値でのフレームレートになるので、ブラウザを起動している端末ごとに切り替えるための条件文を加える必要がありますが、cssは、ブラウザのレンダリングエンジンでそうした判定を行ってくれるため、非常にコードもシンプルで行えます。
 

まさに、ユーザーにもプログラマーにも、バッテリーにも優しいシステムになるということですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です