2011年3月 3日 00:35

ブラウザ画面全体をいったん白で覆ってなんか表示させるスプラッシュ

スポンサードリンク

今日は3月3日のひな祭りと言うことで、Googleのロゴもひな祭りになっているらしいですけれども、3月と言えば、卒業式シーズンですので、なんとなく画面全体を覆って卒業的な文字を出すのを作った。実際に使う時にはもーちょっと練る。

G R A D U A T I O N

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
    ></script>
    <script type="text/javascript">
    $(function(){
      $('#graduation').delay(2000).fadeIn(3000);
      $('#graduationtypo1').delay(7000).fadeIn(1000);
      $('#graduationtypo2').delay(8000).fadeIn(1000);
      $('#graduationtypo3').delay(9000).fadeIn(1000);
      $('#graduationtypo4').delay(10000).fadeIn(1000);
      $('#graduationtypo5').delay(11000).fadeIn(1000);
      $('#graduationtypo6').delay(12000).fadeIn(1000);
      $('#graduationtypo7').delay(13000).fadeIn(1000);
      $('#graduationtypo8').delay(14000).fadeIn(1000);
      $('#graduationtypo9').delay(15000).fadeIn(1000);
      $('#graduationtypo10').delay(16000).fadeIn(1000);
      $('#graduationtypo11').delay(17000).fadeIn(1000);
      $('#graduation').click(function(){$(this).hide()});
    });
    </script>
    <style>
    body {
      background-color: #ddd;
    }
    p {
      color: #555;
      text-shadow: 1px 0px 0px #eee;
    }
    #graduation {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: white;
      display: none;
    }
    #graduationmessage {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px; height: 300px; 
      line-height: 300px;
      margin: -150px 0px 0px -300px;
      text-align: center;
    }
    .graduationtypo {
      display: none;
    }
    </style>
  </head>
  <body>
    <h1>
      スプラッシュテスト
    </h1>
    <p>
      　ＳＭマニアから見れば、この事件にＳＭ性は感じられないという。だが一般（ノーマルな性的趣味）の人からすると、どちらも変質者で同じような気もするが……。「違います。事件の犯人は変質者。ＳＭマニアは変態。ＳＭマニアは自分が変態であることを認知しているし、立場も分かっていれば理性もある。日常生活においては全く普通で、性欲の部分だけが変態なんです。」（Ｇ氏）つまり変質者は理性がなくなるから犯罪にまで及んでしまうということだ。通り魔だけじゃなくて痴漢なども変質者のたぐいになるらしい。なおＧ氏によるとＳＭマニアに対して「変態」と言うぶんには何も問題ないが……
    </p>
    <div id="graduation">
      <p id="graduationmessage">
        <span id="graduationtypo1" class="graduationtypo">G</span>
        <span id="graduationtypo2" class="graduationtypo">R</span>
        <span id="graduationtypo3" class="graduationtypo">A</span>
        <span id="graduationtypo4" class="graduationtypo">D</span>
        <span id="graduationtypo5" class="graduationtypo">U</span>
        <span id="graduationtypo6" class="graduationtypo">A</span>
        <span id="graduationtypo7" class="graduationtypo">T</span>
        <span id="graduationtypo8" class="graduationtypo">I</span>
        <span id="graduationtypo9" class="graduationtypo">O</span>
        <span id="graduationtypo10" class="graduationtypo">N</span>
      </p>
    </div>
  </body>
</html>

テストするときは、Operaでabout:blankを表示させた後、Ctrl+Uでソース表示させたところにおもむろにペーストして、「変更を適用」ボタンを選択すると、htmlファイルを保存することなくテストできますのでお勧めです。

正直に言うと、absoluteを使っている関係上、ページを開いた一番上で物語が起きるようになっている。スクロールした先にはついていかないんですね。

この手のやつは、自分の手から離れて使われることを想定したほうがいいので、こうやって同じようなのの羅列を書いておいた方が何気にトラブルを回避できます。

2011.03.03 00:35 投稿　大野義貴 [Web] | 固定リンク |