MediaWiki:Common.js: Difference between revisions
Created page with "→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; 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); return `<span style="--hue:${hue}; --delay:${rainbowDelay}s; --wave-delay:${waveDelay}s">${c === '..." |
No edit summary Tag: Reverted |
||
| Line 3: | Line 3: | ||
const chars = el.textContent.split(''); | const chars = el.textContent.split(''); | ||
const total = chars.length; | const total = chars.length; | ||
const isWavy = el.classList.contains('wavy'); | |||
const isRainbow = el.classList.contains('rainbow'); | |||
el.innerHTML = chars.map((c, i) => { | el.innerHTML = chars.map((c, i) => { | ||
const hue = Math.round((i / total) * 360); | const hue = Math.round((i / total) * 360); | ||
const rainbowDelay = -((i / total) * 3).toFixed(2); | const rainbowDelay = -((i / total) * 3).toFixed(2); | ||
const waveDelay = ((i / total) * 1).toFixed(2); | const waveDelay = ((i / total) * 1).toFixed(2); | ||
let delay = ''; | |||
if (isWavy && isRainbow) delay = `${waveDelay}s, ${rainbowDelay}s`; | |||
else if (isWavy) delay = `${waveDelay}s`; | |||
else if (isRainbow) delay = `${rainbowDelay}s`; | |||
const color = isRainbow ? `color: hsl(${hue}, 100%, 70%);` : ''; | |||
return `<span style="${color} animation-delay: ${delay}">${c === ' ' ? ' ' : c}</span>`; | |||
}).join(''); | }).join(''); | ||
} | } | ||
Revision as of 16:35, 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 delay = '';
if (isWavy && isRainbow) delay = `${waveDelay}s, ${rainbowDelay}s`;
else if (isWavy) delay = `${waveDelay}s`;
else if (isRainbow) delay = `${rainbowDelay}s`;
const color = isRainbow ? `color: hsl(${hue}, 100%, 70%);` : '';
return `<span style="${color} animation-delay: ${delay}">${c === ' ' ? ' ' : c}</span>`;
}).join('');
}
$(document).ready(function() {
document.querySelectorAll('.rainbow, .wavy').forEach(applyEffects);
});