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

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

ドクンと脈打つ長押しボタン

押し続けると縮んだまま待機し、規定の長さ押し切ると心拍のように二度弾んで確定します。WordPressの重要操作の誤タップ防止ボタンに使えます。

mobileclickjs

プレビュー

ソースコード

HTML

<div class="d08-11-08-stage">
          <button class="d08-11-08-btn" type="button">長押しで確定</button>
          <span class="d08-11-08-status"></span>
        </div>

CSS

.d08-11-08-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d08-11-08-btn{background:linear-gradient(135deg,#6a5cff,#8b7bff);color:#fff;border:none;border-radius:12px;padding:14px 26px;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;transition:transform .15s}
        .d08-11-08-btn.is-press{transform:scale(.94)}
        .d08-11-08-btn.is-confirm{animation:d08-11-08-thump .6s ease-in-out}
        @keyframes d08-11-08-thump{0%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(.96)}45%{transform:scale(1.12)}60%{transform:scale(.98)}100%{transform:scale(1)}}
        .d08-11-08-status{font-size:12px;font-weight:700;color:#6a5cff;min-height:16px;display:block}

JavaScript

(function(){
        var btn=document.querySelector('#item-08-11-08 .d08-11-08-btn');
        var status=document.querySelector('#item-08-11-08 .d08-11-08-status');
        if(!btn||!status)return;
        var holdTimer=null,clearTimer=null;
        function startPress(){
          if(clearTimer)clearTimeout(clearTimer);
          status.textContent='';
          btn.classList.add('is-press');
          holdTimer=setTimeout(function(){
            btn.classList.remove('is-press');
            btn.classList.remove('is-confirm');void btn.offsetWidth;btn.classList.add('is-confirm');
            status.textContent='確定しました';
            clearTimer=setTimeout(function(){status.textContent='';},1400);
          },650);
        }
        function cancelPress(){
          if(holdTimer){clearTimeout(holdTimer);holdTimer=null;}
          btn.classList.remove('is-press');
        }
        btn.addEventListener('mousedown',startPress);
        btn.addEventListener('touchstart',startPress,{passive:true});
        btn.addEventListener('mouseup',cancelPress);
        btn.addEventListener('mouseleave',cancelPress);
        btn.addEventListener('touchend',cancelPress);
        btn.addEventListener('touchcancel',cancelPress);
      })();

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