top of page

Wix Studio Tips and Tricks

Public·1 member

Wix Studio Dynamic Title [Code]

<style>

#dynamicHeading {

font-family: Arial, sans-serif;

color: #F25041;

display: inline-block;

overflow: hidden;

white-space: wrap; /* Use nowrap instead of wrap to prevent line breaks */

font-size: 10vw; /* Default size using vw units */

font-weight: bold;

text-align: center; /* Center align the text */

}


.dynamicWord {

color: #3A848C;

display: inline-block;

animation: fade 0.5s ease-in-out;

font-size: 10vw; /* Default size using vw units */

font-weight: bold;

min-width: 100px; /* Adjust this value to fit the longest word */

text-align: center;

}


@keyframes fade {

0% { opacity: 0; transform: translateY(-20px); }

100% { opacity: 1; transform: translateY(0); }

}


/* Media queries to cap the font size */

@media (max-width: 450px) {

#dynamicHeading, .dynamicWord {

font-size: 45px; /* Minimum font size for small screens */

}

}


@media (min-width: 1000px) {

#dynamicHeading, .dynamicWord {

font-size: 100px; /* Maximum font size for large screens */

}

}

</style>


<div id="dynamicHeading">

Discover the Finest <span class="dynamicWord">Pure</span> Spices

</div>


<script>

// Array of words to replace "X"

const words = ["Pure", "Blend", "VIP", "World"];

let currentIndex = 0;


// Function to update the heading

function updateHeading() {

const dynamicWordElement = document.querySelector(".dynamicWord");

dynamicWordElement.innerHTML = words[currentIndex];

dynamicWordElement.style.animation = "none"; // Reset animation

dynamicWordElement.offsetHeight; // Trigger reflow

dynamicWordElement.style.animation = null; // Restart animation

currentIndex = (currentIndex + 1) % words.length;

}


// Preload all words

window.addEventListener('load', () => {

words.forEach(word => {

const span = document.createElement('span');

span.style.visibility = 'hidden';

span.innerText = word;

document.body.appendChild(span);

document.body.removeChild(span);

});

// Initial call to set the heading immediately

updateHeading();

// Update the heading every 3 seconds

setInterval(updateHeading, 3000);

});

</script>

155 Views

About

Share your cool Wix Studio Tips and Tricks

bottom of page