I’m trying to achieve an effect that, as soon as the page loads, makes every letter letter in some specific headings slightly different in size, rotation and moved on the x-axis. I don’t need this to be animated. It’s just a static layout. I managed to do that locally, with a code that looks kinda like this.
// Helper function to create spans for each character, including whitespace characters
function wrapCharacters(el) {
const text = el.textContent;
const characters = text.split('');
const wrappedCharacters = characters
.map(char => {
if (char.trim() === '') {
return `<span class="wiggle-whitespace">${char}</span>`; // Wrap whitespace characters
} else {
return `<span>${char}</span>`; // Wrap letters
}
})
.join('');
el.innerHTML = wrappedCharacters;
}
// Initialize wiggling effect for each letter
function initWiggling() {
const header = document.querySelector('.wiggle-text');
// Wrap each character in a span
wrapCharacters(header);
// Get the individual letter spans
const letterSpans = header.querySelectorAll('span');
// Function to get a random value within a range
function getRandomValue(min, max) {
return Math.random() * (max - min) + min;
}
// Calculate and store random target values for each letter
const targets = [];
letterSpans.forEach((span, index) => {
const targetTranslation = getRandomValue(-0.5, 0.5);
const targetRotation = getRandomValue(-6.5, 6.5);
const targetScale = getRandomValue(0.9, 1.1); // Random scale factor (adjust the range as needed)
targets.push({ translation: targetTranslation, rotation: targetRotation, scale: targetScale });
span.style.transform = `translateX(${targetTranslation}px) rotateZ(${targetRotation}deg) scale(${targetScale})`;
});
}
// Linear interpolation function (lerp) for smooth animation
function lerp(start, end, amount) {
return (1 - amount) * start + amount * end;
}
// Call the initWiggling function when the page loads
window.addEventListener('load', initWiggling);
Here’s a picture with the result that this code produces locally.
However, I cannot seem to achieve the same result within ReadyMag. I feel like I have a sufficient understanding of where to put the custom code and how to reference the data-id widgets and so on, however, it doesn’t work, even after many different iterations. Could some of you help me in figuring out what I’m missing?