← 動的パーツギャラリーへ戻る

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

ランダムバースト信号グリッチ

一定間隔ではなく不規則なタイミングで文字が一瞬だけ激しく乱れ、すぐに元に戻ります。放送事故のような予測できない乱れ方が、WordPressの障害告知・メンテナンス中ページやサイバー演出のアクセントになります。

js

プレビュー

ソースコード

HTML

<h4 class="d02-09-12-txt" data-text="OFFLINE">OFFLINE</h4>

CSS

.d02-09-12{background:#08090d;position:relative;overflow:hidden}
        .d02-09-12-txt{position:relative;margin:0;font-size:38px;font-weight:900;color:#e5e7eb;letter-spacing:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
        .d02-09-12-txt::before,.d02-09-12-txt::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;opacity:0}
        .d02-09-12-txt::before{color:#39e6ff}
        .d02-09-12-txt::after{color:#ff2d5f}
        .d02-09-12-txt.d02-09-12-burst{animation:d1712shake .18s steps(2) 1}
        .d02-09-12-txt.d02-09-12-burst::before{opacity:1;left:3px;animation:d1712slice1 .18s steps(2) 1}
        .d02-09-12-txt.d02-09-12-burst::after{opacity:1;left:-3px;animation:d1712slice2 .18s steps(2) 1}
        @keyframes d1712shake{0%{transform:translateX(0)}50%{transform:translateX(-4px) skewX(-3deg)}100%{transform:translateX(3px) skewX(2deg)}}
        @keyframes d1712slice1{0%{clip-path:inset(10% 0 60% 0)}50%{clip-path:inset(55% 0 8% 0)}100%{clip-path:inset(20% 0 45% 0)}}
        @keyframes d1712slice2{0%{clip-path:inset(60% 0 15% 0)}50%{clip-path:inset(15% 0 55% 0)}100%{clip-path:inset(40% 0 20% 0)}}
        @media (prefers-reduced-motion: reduce){
          .d02-09-12-txt.d02-09-12-burst,.d02-09-12-txt.d02-09-12-burst::before,.d02-09-12-txt.d02-09-12-burst::after{animation:none;opacity:0}
        }

JavaScript

(function(){
        var root = document.getElementById('item-02-09-12');
        if(!root) return;
        var txt = root.querySelector('.d02-09-12-txt');
        if(!txt) return;
        var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        if(reduce) return;
        function burst(){
          txt.classList.add('d02-09-12-burst');
          setTimeout(function(){ txt.classList.remove('d02-09-12-burst'); }, 200);
          setTimeout(burst, 900 + Math.random() * 2200);
        }
        setTimeout(burst, 600 + Math.random() * 800);
      })();

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