パーツ番号 08-15-04 ・ JavaScript使用
揺れながら戻るペンダントドラッグ
先端のアイコンを横にドラッグして離すと、振り子のように揺れながら減衰して静止します。WordPressのお気に入りバッジやペンダント風装飾に使えます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。