JSFiddle - React, Tailwind, and code Playground
HTML
<div id="msg" class="msg">
Isso é uma mensagem bem dahora.
Da hora de mais até
</div>
CSS
body {
font-family: 'Verdana';
font-size: 16px;
background: #434343;
}
.msg {
margin: 22px;
padding: 12px;
background: #777;
color: #f2f2f2;
box-shadow: 4px 4px 6px rgba(0,0,0,0.4);
cursor: pointer;
}
JavaScript
const nudgeDuration = 1200;
const nudgeIntensity = 6;
const rand = (a, b) => a + Math.random() * b
const nudgePos = (p0, n) => p0 + n - 2*rand(0,n);
const nudge = (element, intensity, duration) => {
console.log(element);
let intv = setInterval(()=> {
element.style.transform = `translate(${nudgePos(0,intensity)}px, ${nudgePos(0, intensity)}px)`
}, 15)
setTimeout(()=> {
clearInterval(intv)
element.style.transform = "";
}, duration);
};
const elt = document.getElementById("msg");
elt.addEventListener('click', ()=> {
nudge(elt, nudgeIntensity, nudgeDuration);
})