パーツ番号 09-03-12 ・ JavaScript使用

500サーバーエラー(グリッチ演出)

大きな「500」の文字が時々ノイズ状に乱れるグリッチ演出付きのサーバーエラー画面です。WordPressの重大障害時のフォールバック画面に使えます。

プレビュー

ソースコード

HTML

<div class="d09-03-12-wrap">
          <p class="d09-03-12-num" id="d09-03-12-num">500</p>
          <p class="d09-03-12-msg">サーバーエラーが発生しました</p>
          <p class="d09-03-12-sub">しばらくしてから再度お試しください</p>
        </div>

CSS

.prev.d09-03-12{background:#181a20}
        .d09-03-12-wrap{text-align:center}
        .d09-03-12-num{margin:0;font-size:64px;font-weight:800;color:#f45b69;letter-spacing:.03em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
        .d09-03-12-msg{margin:10px 0 4px;font-weight:700;color:#e7e9f2;font-size:15px}
        .d09-03-12-sub{margin:0;font-size:12px;color:#8890a6}

JavaScript

(function(){
        var root=document.querySelector('#item-09-03-12');if(!root)return;
        var el=root.querySelector('#d09-03-12-num');
        var base='500',glitchChars='#%&$?!0158';
        function glitch(){
          var arr=base.split('').map(function(c){
            return Math.random()<0.5?glitchChars.charAt(Math.floor(Math.random()*glitchChars.length)):c;
          });
          el.textContent=arr.join('');
          setTimeout(function(){el.textContent=base;},120);
        }
        setInterval(glitch,1800);
      })();

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