見出しアニメーション

id:amachang

が面白かったんで、JavaScript 未経験ながら試してみました。見よう見まねで(;^_^A

「タイトルとロケーションバーが既にあるなら、残るは本文しかない!」というわけで、本文の見出しをアニメーションにしてみました。

<html>
  <head>
    <meta charset="utf-8">
    <title>見出しアニメーション</title>
    <script type="text/javascript">
      // 見出しに表示する文字列群
      var texts = [
        'ガ━━━(゚Д゚;)━━━ン!!!!!',
        'ガ━━━( ゚Д)━━━ン!!!!!',
        'ガ━━━(  ゚)━━━ン!!!!!',
        'ガ━━━(   )━━━ン!!!!!',
        'ガ━━━(゚;  )━━━ン!!!!!',
        'ガ━━━(Д゚; )━━━ン!!!!!',
      ];
      var i = 0;
      // function() の部分は C# でいうところの匿名メソッド?
      setInterval(function() {
        // <h1> 要素を取得する
        var obj = document.getElementById("hoge");
        // <h1></h1> で囲まれた中身を変更する
        obj.innerHTML = texts[i++ % texts.length];
      }, 100);
    </script>
  </head>
  <body>
    <h1 id="hoge"/>
  </body>
</html>

JavaScritp と DOM の知識は、両方とも全くありません。function() の部分は、C# の匿名メソッドみたいなものかな?かな?

試す場合はコピペで適当なファイルを作成して下さい。文字コードUTF-8 で。オリジナルを知っていれば、どんな動きになるか想像できますけどね。

JavaScript 面白いなぁ。Web ブラウザとエディタがあれば試せる手軽さは良いですね!本格的に勉強してみようかな。