<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>
Comments