パーツ番号 02-09-01 ・ CSSのみ

RGBずれグリッチ見出し

赤緑青のレイヤーが不規則にずれて明滅する定番グリッチ演出です。WordPressのテック系・ゲーム系サイトのヒーロー見出しやキャンペーンタイトルに使うと強い視覚的インパクトを与えられます。

css

プレビュー

ソースコード

HTML

<h4 class="d02-09-01-txt" data-text="GLITCH">GLITCH</h4>

CSS

.d02-09-01{background:#0b0e14}
        .d02-09-01-txt{position:relative;margin:0;font-size:42px;font-weight:900;color:#f5f5f5;letter-spacing:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
        .d02-09-01-txt::before,.d02-09-01-txt::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
        .d02-09-01-txt::before{color:#00e5ff;left:2px;text-shadow:-1px 0 #00e5ff;animation:d1051g1 3.4s infinite linear}
        .d02-09-01-txt::after{color:#ff2d95;left:-2px;text-shadow:1px 0 #ff2d95;animation:d1051g2 2.6s infinite linear}
        @keyframes d1051g1{
          0%,100%{clip-path:inset(10% 0 78% 0)}
          12%{clip-path:inset(60% 0 5% 0)}
          24%{clip-path:inset(30% 0 45% 0)}
          36%{clip-path:inset(80% 0 2% 0)}
          48%{clip-path:inset(5% 0 70% 0)}
          60%{clip-path:inset(45% 0 30% 0)}
          72%{clip-path:inset(15% 0 60% 0)}
          84%{clip-path:inset(70% 0 10% 0)}
        }
        @keyframes d1051g2{
          0%,100%{clip-path:inset(70% 0 10% 0)}
          15%{clip-path:inset(20% 0 55% 0)}
          30%{clip-path:inset(50% 0 20% 0)}
          45%{clip-path:inset(5% 0 80% 0)}
          60%{clip-path:inset(65% 0 15% 0)}
          75%{clip-path:inset(25% 0 40% 0)}
          90%{clip-path:inset(40% 0 35% 0)}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-09-01-txt::before,.d02-09-01-txt::after{animation:none;clip-path:none;opacity:.5}
        }

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