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

2018年6月19日

Javascript テクノロジー プログラミング

t f B! P L
とあるプロジェクトでWEBページ内に動画を再生するコンテンツを作りました。 その際に、動画の最後は、関わったスタッフの名前を全て表示させる「スタッフロール」が欲しいとの声が上がり、簡易に実現させるために、映画のエンディングロールのような効果をCSSと若干のJSを使って構築してみました。 特にすごい技術というわけではないのですが、汎用性の高い考え方ができたので、まとめておくことにしました。

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

まずは、映画エンドロールを簡易に作ってみます。 画面に600x400の黒幕を作って、数十行ある文字列を上に迫り上がるようにスクロールさせていきます。 <DOCTYPE html> <html> <head> <style> #movie{ width : 600px; height : 400px; background-color:black; overflow:hidden; position:relative; } .roll-text{ white-space : pre; color:white; padding:8px; position:absolute; animation: anim-scroll-up 30s linear forwards; } @keyframes anim-scroll-up{ from{ top:auto; } to{ bottom:100%; } } </style> </head> <body> <h1>CSS - Design</h1> <div id="movie"> <div class="roll-text"> 1 : AAAAA 2 : BBBBB 3 : CCCCC 4 : DDDDD 5 : EEEEE 6 : FFFFF 7 : GGGGG 8 : HHHHH 9 : IIIII 10 : JJJJJ 11 : KKKKK 12 : LLLLL 13 : MMMMM 14 : NNNNN 15 : OOOOO 16 : PPPPP 17 : QQQQQ 18 : RRRRR 19 : SSSSS 20 : TTTTT 21 : UUUUU 22 : VVVVV 23 : WWWWW 24 : XXXXX 25 : YYYYY 26 : ZZZZZ </div> </div> <script> var rollText = document.querySelector("#movie .roll-text"); rollText.style.setProperty("bottom" , (rollText.offsetHeight * -1) + "px" , ""); </script> </body> </html>

簡単解説

スクロールは、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は以下の通りです。参考までに載せておきます。 /*左->右*/ @keyframes anim-move-right{ from{ right:auto; } to{ left:100%; } } /*左<-右*/ @keyframes anim-move-left{ from{ left:auto; } to{ right:100%; } } 左から右に移動する場合は、起点をエレメントの幅サイズに-1を掛けた値をleftにpxで設置し、 右から左の場合は、同じ値をrightにpxで設置してあげると、アニメーションが可能になります。 cssのもう一つの利点として、javascriptでsetIntervalなどで行う処理よりも、軽くて負荷の少ないアニメーション構築ができる点です。 javascriptアニメーションは、msec指定をした値でのフレームレートになるので、ブラウザを起動している端末ごとに切り替えるための条件文を加える必要がありますが、cssは、ブラウザのレンダリングエンジンでそうした判定を行ってくれるため、非常にコードもシンプルで行えます。 まさに、ユーザーにもプログラマーにも、バッテリーにも優しいシステムになるということですね。

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出。

ブログ アーカイブ

QooQ