BABELのコード

各ソース(HTML)をダウンロードしたら、そのファイルをWebブラウザへD&Dしてください。

経過時間指定で発動させても良いし、何かの要素のクリックで発動させても良いですね。
表示する文言はオリジナリティ溢れるモノに差し替えしてもらうほうが良いかと。

改造ソース２

2024-12-25
デカ文字は独立させた方がいいとDMが来たので変更。眠いですぅ…

ダイナミックさ控えめ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <meta name="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>BABEL</title>
    <style>
      body {
        background:#000000;
      }
      .babel1 {
        font-family:"Baskerville","sans-serif";
        color:#ff0000;
      }
    </style>
 
    <script>
      function WriteBabel(){
        // 明滅処理
        bgColor += vec;
        vec      = bgColor == 128 ? -1 : bgColor == 0 ? 1 : vec;
        div.style.backgroundColor = "#" + ("000000"+((bgColor*256*256).toString(16))).slice(-6);
 
        // テキスト選択
        var daice   = Math.floor(Math.random() * 100);
        var fontidx = daice == luckeynum ? 0 : Math.floor(Math.random() * (fontsizes.length - 3) + 2);
        var text    = words[Math.floor(Math.random() * words.length)] + " ";
 
        // ラッキーテキスト時（独立表示用）
        if (daice == luckeynum) {
          p = document.createElement('p');
          p.style.className = "babel1";
          p.style.textAlign = "center";
          p.style.color = "#ff0000";
          div.appendChild(p); 
        }
 
        // テキスト先頭1文字
        var span1 = document.createElement('span'); 
        span1.textContent = text.substring(0,1);
        span1.style.fontColor = "red";
        span1.style.fontSize = fontsizes[fontidx].toString() + "pt";
        p.appendChild(span1);
 
        // テキスト2文字目以降
        var span2 = document.createElement('span'); 
        span2.textContent = text.substring(1);
        span2.style.fontColor = "red";
        span2.style.fontSize = fontsizes[fontidx + 1].toString() + "pt";
        p.appendChild(span2);
 
        // ラッキーテキスト時（独立表示後用）
        if (daice == luckeynum) {
          p = document.createElement('p');
          p.style.className = "babel1";
          p.style.color = "#ff0000";
          div.appendChild(p); 
        }
 
        // 画面をスクロール
        posY += Math.floor(Math.random() * 15) + 5; 
        window.scroll({top:posY, behavior:'smooth'});
      }
    </script>
  </head>
  <body>
 
    <div id="display">
      <p class="babel1" id="message"></p>
    </div>
 
    <script>
      var posY      = window.innerHeight;
      var div       = document.getElementById('display');
      var p         = document.getElementById('message');
      var bgColor   =  1;
      var vec       = +1;
      var words     = ["ねぇねぇ","こっちおいでよ","あそぼうよ","どこいくの","いじめる？","にがさない","キライ"];
      var fontsizes = [120, 80, 32, 28, 24, 20, 16, 12]; // 4つ以上の定義が必要
      var luckeynum = 25;
      window.setInterval(WriteBabel, 5);
    </script>
 
  </body>
</html>

改造ソース１

もっと画面の動きを追加。

babel.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <meta name="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>BABEL</title>
    <style>
      body {
        background:#000000;
      }
      .babel1 {
        font-family:"Baskerville","sans-serif";
        color:#ff0000;
      }
    </style>
 
    <script>
      function WriteBabel(){
        posY     += Math.floor(Math.random() * 15) + 5; 
        bgColor  += vec;
        vec       = bgColor == 128 ? -1 : bgColor == 0 ? 1 : vec;
        fontsize += fontvec;
        fontvec   = fontsize > 300 ? -0.25 : fontsize < 30 ? 0.25 : fontvec;
 
        p.textContent += (words[Math.floor(Math.random() * words.length)] + " ");
        http://div.style.backgroundColor = "#" + ("000000"+((bgColor*256*256).toString(16))).slice(-6);
 
        window.scroll({top:posY, behavior:'smooth'});
        http://p.style.fontSize = fontsize.toString() + "px";
      }
    </script>
  </head>
  <body>
 
    <div id="display">
      <p class="babel1" id="message"></p>
    </div>
 
    <script>
      var posY     = window.innerHeight;
      var div      = document.getElementById('display');
      var p        = document.getElementById('message');
      var bgColor  =  1;
      var vec      = +1;
      var fontsize =  4.75;
      var fontvec  = +0.25;
      var words    = ["ねぇねぇ","あそぼうよ","どこいくの","いじめる？","にがさない","キライ"];
      window.setInterval(WriteBabel, 5);
    </script>
 
  </body>
</html>

元のソース

BABELだよ。

babel.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>BABEL</title>
    <style>
      body {
        background:#000000;
      }
      .babel1 {
        font-family:"Baskerville","sans-serif";
        color:#ff0000;
      }
    </style>
 
    <script>
      function WriteBabel(){
        document.getElementById('message').textContent += "BABEL ";
        posY += 5; 
        bg   += vec;
        if (bg == 255) vec = -1; else if (bg == 0) vec = +1;
        div.backgroundColor = "#" + ("000000"+(bg*256*256).toString(16)).slice(-6); 
        window.scroll({top:posY, behavior:'smooth'});
      }
    </script>
  </head>
  <body>
 
    <div id="display">
      <p class="babel1" id="message"></p>
    </div>
 
    <script>
      var posY  = window.innerHeight;
      var div   = document.getElementById('display').style;
      var bg    = 1;
      var vec   = +1;
      window.setInterval(WriteBabel, 5);
    </script>
 
  </body>
</html>

目次

BABELのコード

改造ソース２

改造ソース１

元のソース