パーツ番号 02-02-06 ・ JavaScript使用

スプリットフリップ(パタパタ)

空港の発着案内板のように各桁がパタパタと切り替わり目的の単語を表示します。WordPressのニュースやステータス表示にレトロな動きを添えます。

プレビュー

ソースコード

HTML

<div class="d02-02-06-board" role="img" aria-label="ARRIVAL"></div>

CSS

.d02-02-06{background:#111}
        .d02-02-06-board{display:flex;gap:4px}
        .d02-02-06-cell{width:26px;height:38px;background:#1f2937;color:#fbbf24;
          font-family:monospace;font-weight:800;font-size:22px;
          display:flex;align-items:center;justify-content:center;border-radius:3px;
          box-shadow:inset 0 -1px 0 rgba(0,0,0,.6)}

JavaScript

(function(){
        var board=document.querySelector('#item-02-02-06 .d02-02-06-board');
        var words=['ARRIVAL','DEPART','ONTIME','WELCOME'];
        var glyphs='ABCDEFGHIJKLMNOPQRSTUVWXYZ ';
        var len=7,cells=[];
        for(var i=0;i<len;i++){var c=document.createElement('div');c.className='d02-02-06-cell';c.textContent=' ';board.appendChild(c);cells.push(c);}
        var wi=0;
        function show(word){
          word=(word+'       ').slice(0,len);
          cells.forEach(function(cell,i){
            var steps=8+i*3,n=0;
            var t=setInterval(function(){
              cell.textContent=word[i]===' '?' ':glyphs[Math.floor(Math.random()*glyphs.length)];
              n++;
              if(n>=steps){clearInterval(t);cell.textContent=word[i];}
            },55);
          });
        }
        show(words[0]);
        setInterval(function(){wi=(wi+1)%words.length;show(words[wi]);},3000);
      })();

クラス名 .d02-02-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。