MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
| Line 23: | Line 23: | ||
button.style.transform = 'perspective(400px) scale(1) rotateX(0deg) rotateY(0deg)'; | button.style.transform = 'perspective(400px) scale(1) rotateX(0deg) rotateY(0deg)'; | ||
}); | }); | ||
}); | }); | ||
Revision as of 14:08, 12 September 2026
/* Any JavaScript here will be loaded for all users on every page load. */
mw.hook('wikipage.content').add(function () {
const button = document.querySelector('.your-button-class');
if (!button) return;
const premiumEase = 'cubic-bezier(0.23, 1, 0.32, 1)';
button.addEventListener('mouseenter', () => {
button.style.transition = `transform 0.15s ${premiumEase}`;
});
button.addEventListener('mousemove', (e) => {
const rect = button.getBoundingClientRect();
const x = (e.clientX - rect.left - rect.width / 2) / (rect.width / 2);
const y = (e.clientY - rect.top - rect.height / 2) / (rect.height / 2);
button.style.transform = `perspective(400px) scale(1.05) rotateX(${y * -15}deg) rotateY(${x * 15}deg)`;
});
button.addEventListener('mouseleave', () => {
button.style.transition = `transform 0.65s ${premiumEase}`;
// Force the browser to commit the 0.65s transition before updating the transform
void button.offsetHeight;
button.style.transform = 'perspective(400px) scale(1) rotateX(0deg) rotateY(0deg)';
});
});