2017/05/20
あいも変わらず、なんとか風という胡散臭いCSSのご紹介です。今回はアニメのルパン三世のオープニングタイトルのタイプライターのような効果を狙ったCSSです。
さらば愛しきルパン
スターウォーズ風は映画自体見たことないので単なる想像でしたが、ルパン三世のテレビアニメはよく見ていました。でもやっぱり真似るとなれば見本が必要ですが、どうも都合のいいのがなくてええ加減なやつができてしまいました。
今回のも実際に使うことはないと思いますが、汎用性が低いです。とりあえずアイデアをもとに作ってみましたが、もっと工夫が必要です。でも、せっかく作ったので一応公開しておきます。またの機会にもう少し汎用性の高いものを作って公開したいと思います。
HTML
<div class="lupin_box">
<p class="lupin3">全角９文字対応です</p>
</div>
背景を黒にするlupin_boxと文字にタイプライター効果を付けるlupin3を設定します。
CSS
.lupinbox{
background-color:#000;
width:280px;
height:240px;
position:relative;
}
.lupin3{
position:absolute;
top:50px;
font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , serif;
color: #fff;
font-size:46px;
text-align:right;
overflow:hidden;
animation-name: lupin;
animation-duration: 3s;
animation-timing-function: steps(9, end);
}
@keyframes lupin {
0% {top:-60px; height:300px; font-size:240px; margin-left:0; width:240px;}
100%{top:-60px; height:300px; font-size:240px; margin-left:-2160px; width:2400px;}
}
仕組みはアニメーション時に文字サイズを大きくして文字列の幅を1文字分ずつ増やしていきます。そのままでは、文字が右に増えていくだけなので（文字サイズを拡大しない場合はここまで）1文字ずつ1文字分左にずらしてきます。
今回のCSSはケースバイケースの依存度が高いです。コピペでなんでも使えるというわけではありません。
まずanimation-duration: 3s;で3秒でタイプライターの効果が終わります。ここは任意の数値に変更できます。次のanimation-timing-function: steps(9, end);は9段階に分けてアニメーション工が効くということです。9段階なのは文字数が9文字だからです。文字数が変わった場合ここを文字数に合わせますが、ここだけではうまくいきません。
親ボックスの大きさに合わせて文字サイズが決まります。今回は親ボックス（黒バック）の高さが240pxなのでアニメーション時（@keyframes）font-sizeが240pxになります。同じ数字が望ましいです。他ではいろいろ不都合が出ます。
top:-70px; height:300px;は単なる文字の配置です。0%時のmargin-left:0; width:240px;は1文字の設定です。font-sizeが240pxなので1文字目だけ表示します。100%時のmargin-left:-2160px; width:2400px;は文字が9文字なので9文字分左にずらすのとずらした文字分プラス1文字分の幅が必要なので2400pxの幅が必要です。
文字数が変わるとCSSを大幅に書き換えなくてはいけません。-2160pxや2400pxはcalc()を使えば多少らくになりますが、ぱっと見の理解の邪魔になるのでやめておきました。
さらに、ばらしますと、タイプライター時の文字の横位置も調整できません。文字の表示幅（width）が大きくなっていくので左に左に伸びていきます（margin-leftをマイナスに増やしている）。文字を右にもっていくと左の文字が見える（うまくやればこちらの方がタイプライター的ですが）ので左右位置も調整できません。
さらにさらにタイプらいーた効果終了後文字列が折り返していますが、任意の場所で折り返しは出来ません。幅いっぱいの中で右揃えで折り返しているだけです。
さらにさらにさらに、アルファベットは使えません。全角文字にのみ対応です。文字の幅を頼りに位置をずらしているのプロポーショナルフォントも無理です。游明朝頼みです。スマホだとうまくいかないです。
限定要素が多すぎますが、それでもご利用になるなら調整してご利用ください。
