MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 11: | Line 11: | ||
const waveDelay = ((i / total) * 1).toFixed(2); | const waveDelay = ((i / total) * 1).toFixed(2); | ||
let | let anim = ''; | ||
if (isWavy && isRainbow) | if (isWavy && isRainbow) anim = `wave 1s ease-in-out ${waveDelay}s infinite, hue-cycle 3s linear ${rainbowDelay}s infinite`; | ||
else if (isWavy) | else if (isWavy) anim = `wave 1s ease-in-out ${waveDelay}s infinite`; | ||
else if (isRainbow) | else if (isRainbow) anim = `hue-cycle 3s linear ${rainbowDelay}s infinite`; | ||
const color = isRainbow ? `color: hsl(${hue}, 100%, 70%);` : ''; | const color = isRainbow ? `color: hsl(${hue}, 100%, 70%);` : ''; | ||
return `<span style="${color} animation | return `<span style="${color} animation: ${anim};">${c === ' ' ? ' ' : c}</span>`; | ||
}).join(''); | }).join(''); | ||
} | } | ||
Revision as of 16:43, 9 March 2026
/* Any JavaScript here will be loaded for all users on every page load. */
function applyEffects(el) {
const chars = el.textContent.split('');
const total = chars.length;
const isWavy = el.classList.contains('wavy');
const isRainbow = el.classList.contains('rainbow');
el.innerHTML = chars.map((c, i) => {
const hue = Math.round((i / total) * 360);
const rainbowDelay = -((i / total) * 3).toFixed(2);
const waveDelay = ((i / total) * 1).toFixed(2);
let anim = '';
if (isWavy && isRainbow) anim = `wave 1s ease-in-out ${waveDelay}s infinite, hue-cycle 3s linear ${rainbowDelay}s infinite`;
else if (isWavy) anim = `wave 1s ease-in-out ${waveDelay}s infinite`;
else if (isRainbow) anim = `hue-cycle 3s linear ${rainbowDelay}s infinite`;
const color = isRainbow ? `color: hsl(${hue}, 100%, 70%);` : '';
return `<span style="${color} animation: ${anim};">${c === ' ' ? ' ' : c}</span>`;
}).join('');
}
$(document).ready(function() {
document.querySelectorAll('.rainbow, .wavy').forEach(applyEffects);
});