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

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

揺れながら戻るペンダントドラッグ

先端のアイコンを横にドラッグして離すと、振り子のように揺れながら減衰して静止します。WordPressのお気に入りバッジやペンダント風装飾に使えます。

dragjs

プレビュー

ソースコード

HTML

<div class="d08-15-04-mount"></div>
        <div class="d08-15-04-pendant" id="d08-15-04-pendant">
          <div class="d08-15-04-string"></div>
          <div class="d08-15-04-bob" id="d08-15-04-bob">♥</div>
        </div>

CSS

.d08-15-04{width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:10px}
        .d08-15-04-mount{position:absolute;top:22px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#2a2d3a}
        .d08-15-04-pendant{position:absolute;top:27px;left:50%;width:2px;height:150px;transform-origin:top center}
        .d08-15-04-string{width:2px;height:120px;background:#c9cbe0;margin:0 auto}
        .d08-15-04-bob{position:relative;left:50%;transform:translateX(-50%);width:42px;height:42px;margin-top:-2px;border-radius:50%;background:linear-gradient(135deg,#ff5470,#ff9f43);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 5px 12px rgba(255,84,112,.35);cursor:grab;touch-action:none}
        .d08-15-04-bob.is-drag{cursor:grabbing}

JavaScript

(function(){
        var root=document.getElementById('item-08-15-04');if(!root)return;
        var pendant=root.querySelector('#d08-15-04-pendant'),bob=root.querySelector('#d08-15-04-bob');
        if(!pendant||!bob)return;
        var dragging=false,mountX=0,angle=0,raf=null;
        function apply(a){pendant.style.transform='rotate('+a+'deg)';}
        bob.addEventListener('pointerdown',function(e){
          dragging=true;bob.classList.add('is-drag');
          if(raf)cancelAnimationFrame(raf);
          var r=pendant.getBoundingClientRect();mountX=r.left+r.width/2;
          try{bob.setPointerCapture(e.pointerId);}catch(err){}
        });
        bob.addEventListener('pointermove',function(e){
          if(!dragging)return;
          var dx=e.clientX-mountX;
          angle=Math.max(-60,Math.min(60,dx/2));
          apply(angle);
        });
        function end(){
          if(!dragging)return;
          dragging=false;bob.classList.remove('is-drag');
          var a=angle,v=0,stiff=.12,damp=.86;
          function step(){
            var f=(0-a)*stiff;v=(v+f)*damp;a+=v;apply(a);
            if(Math.abs(a)>.3||Math.abs(v)>.3){raf=requestAnimationFrame(step);}
            else{apply(0);}
          }
          raf=requestAnimationFrame(step);
        }
        bob.addEventListener('pointerup',end);
        bob.addEventListener('pointercancel',end);
      })();

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