CSS

2017/06/01

驚かいた方は、ごめんなさい。悪意はありません。おふざけがちょっとすぎてるかもしれませんが、文字をでかく表示しただけですのであなたのシステムは以前のままのセキュリティ状態です。

不完全な出来ですのであくまで参考にご自身で完成お願いします。

完全に全画面にしたかったのですが、サイトの表示の基幹部分がbootstrapなのでちょっとうまくいきませんでした。たぶんbootstrapのCSSと競合しているんです。そうに違いありません。と思っています。position:absolute;z-index:2001;なのですが駄目でした。親要素になんかのpositionがあったりするんでしょう。

なのでリンク先を見ていただいたらやりたいことがお分かりいただけるかと。

まあ、これこそ使い道は全然ないのですが、 ルパン三世　タイプライター風　CSS なことをやっちゃいましたのでもう少し、アレなバージョンを作ってみました。私のレベルではこれが限界ですのできれいに、短く、わかりやすくは出来ませんでした、せめてもし、使用する方がいらっしゃるのならどこを変更すればいいのかだけ触れておこうと思います。

HTML

<div class="black_box">
  <div class="moji_box">
    <p class="typewriter">ウイルスに感染してない</p>
  </div>
</div>

HTMLは3重構造です。一番親が黒の画面です。その子供が1文字だけ表示するためのボックスです。このボックスに収まる1文字をずらしていきます。ここにoverflow:hidden;しておけばほかの文字は見えません。ただし幅固定（収まる文字サイズ）ですので半角英数などはおかしくなります。

CSS

.black_box{
  background-color:#000;
  width:320px;				/* タイプライター終了後の大きさ */
  height:210px;				/* タイプライター終了後の大きさ */
  
  animation-name:black_box;		/* 全画面にするためのアニメーション */
  animation-duration:3s;
  animation-timing-function:linear;
}
.moji_box{						/* 1文字ずつ表示するためのボックス */
  background-color:#000;
  padding-top:40px;			/* タイプライター終了後の文字の位置 */
  font-size:40vw;			/* タイプライター時の文字の大きさ 変更すると他にも影響する */
  margin:auto;
  animation-name:moji_box;		/* タイプライター効果（1文字ずつ）のアニメーション */
  animation-duration:3s;
  animation-timing-function:linear;
  overflow:hidden;
  }
.typewriter{
  font-size:48px;			/* タイプライター終了後の文字の大きさ */
  color:#f00;
  text-align:right;
  line-height:1;
  animation-name:typewriter;	/* タイプライター時に文字をずらしていくためのアニメーション */
  animation-duration:3s;
  animation-timing-function:steps(11,end);		/* === 文字数に合わせて数値を変更 steps(文字数,end) === */
  font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , serif;
}
@keyframes black_box{
  /* 全画面にするためのアニメーション */
  0%{position:absolute;top:0;width:100%;height:100%;margin:auto;}
  100%{position:absolute;top:0;width:100%;height:100%;margin:auto;}
}
@keyframes moji_box{
  /* タイプライター効果（1文字ずつ）のアニメーション */
  0%{width:40vw;height:40vw;padding-top:10vw;}
  100%{width:40vw;height:40vw;padding-top:10vw;}
}
@keyframes typewriter{
  /* タイプライター時に文字をずらしていくためのアニメーション */
  0%  {font-size:100%; margin-left:0;       width:100%;}
  100%{font-size:100%; margin-left:calc(-100% * 11); width:calc(100% * (1 + 11));}	/* === 文字数に合わせて数値を変更2か所 * 文字数 === */
  /* 100%{font-size:100%; margin-left:-1100%; width:1200%;} */
}

CSSのポイントはタイプライターにしたい文字数に合わせて3か所文字数の数値に変更してください。===文字数に合わせて数値を変更となっているところ2行3か所です。今回は2か所ｃａｌｃ（）を使っていますので面倒な計算入りませんといいたいのですが、てもとのEdgeでは動きませんでしたので最下行に計算結果をコメントにしています。

もし、スピードを変更する場合はanimation-duration:3s;の3sを変更してください。これも3か所ありますのですべて同じ値で置き換えてください。

スマホは別の事情があるらしく、うまくいってないと思われます。おそらくフォントかと。明朝のWebフォントで作り直して試していただければうまくいくかもです。