とあるプロジェクトで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ファイル１つで完結しているので、サーバーに設置しなくても、そのままブラウザで表示すると実行されるので、確認も楽に行えます。
ちなみに、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は、ブラウザのレンダリングエンジンでそうした判定を行ってくれるため、非常にコードもシンプルで行えます。
まさに、ユーザーにもプログラマーにも、バッテリーにも優しいシステムになるということですね。
