パーツ番号 08-11-04 ・ JavaScript使用

打鍵ウェーブ・インプット

キーを打つたびに入力欄の下端から小さな波紋が浮かび上がり、タイピング音を視覚的に表現します。WordPressの検索窓やチャット入力欄のアクセントに使えます。

jsinput

プレビュー

ソースコード

HTML

<div class="d08-11-04-wrap">
          <label class="d08-11-04-label" for="d08-11-04-input-08-11-04">メッセージ</label>
          <div class="d08-11-04-field">
            <input class="d08-11-04-input" id="d08-11-04-input-08-11-04" type="text" placeholder="入力してみてください">
          </div>
        </div>

CSS

.d08-11-04-wrap{width:100%;max-width:220px;display:flex;flex-direction:column;gap:8px}
        .d08-11-04-label{font-size:11px;font-weight:700;color:#6b7280}
        .d08-11-04-field{position:relative;overflow:hidden;border:1.5px solid #d8dae2;border-radius:8px;background:#fff}
        .d08-11-04-input{width:100%;border:none;outline:none;padding:10px 12px;font-size:14px;background:transparent;box-sizing:border-box}
        .d08-11-04-wave{position:absolute;bottom:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:rgba(90,120,255,.35);transform:translateY(50%) scale(.3);pointer-events:none;animation:d08-11-04-tick .45s ease-out forwards}
        @keyframes d08-11-04-tick{0%{transform:translateY(50%) scale(.3);opacity:.85}100%{transform:translateY(50%) scale(2.6);opacity:0}}

JavaScript

(function(){
        var field=document.querySelector('#item-08-11-04 .d08-11-04-field');
        var input=document.querySelector('#item-08-11-04 .d08-11-04-input');
        if(!field||!input)return;
        input.addEventListener('input',function(){
          var rect=field.getBoundingClientRect();
          var w=document.createElement('span');w.className='d08-11-04-wave';
          var x=10+Math.random()*Math.max(10,rect.width-20);
          w.style.left=x+'px';
          field.appendChild(w);
          setTimeout(function(){w.remove();},480);
        });
      })();

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