top of page

Utility

Tools

Custom Embed - Wix Dynamic Heading

Image showing dynamic heading in Wix with changing words

This code adds a dynamic heading to your website. Use this code with the wix custom HTML embed element. All the instructions on how to edit the code are given in the code itself.



Code

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
       /* Reset default margins and ensure full viewport fit */
       body {
           margin: 0;
           padding: 0;
           overflow: hidden; /* Prevent scrollbars */
           width: 100%;
           height: 100vh;
           display: flex;
           justify-content: center;
           align-items: center;
           font-family: Arial, sans-serif;
       }

       /* Wrapper to constrain content */
       .wrapper {
           width: 100%;
           max-width: 100%;
           padding: 10px;
           box-sizing: border-box;
           text-align: center;
       }

       #dynamicHeading {
           color: #F25041;
           display: inline-block;
           font-size: 6vw; /* Responsive font size */
           font-weight: bold;
           line-height: 1.4; /* Increased line height for better readability */
           word-wrap: break-word; /* Allow wrapping */
       }

       .dynamicWord {
           color: #3A848C;
           display: inline-block;
           font-size: 6vw; /* Match heading size */
           font-weight: bold;
           min-width: 50px; /* Smaller min-width for flexibility */
           animation: fade 0.5s ease-in-out;
       }

       @keyframes fade {
           0% { opacity: 0; transform: translateY(-20px); }
           100% { opacity: 1; transform: translateY(0); }
       }

       /* Media queries for responsive font sizing */
       @media (max-width: 450px) {
           #dynamicHeading, .dynamicWord {
               font-size: 20px; /* Smaller font for mobile */
               min-width: 40px;
           }
       }

       @media (min-width: 1000px) {
           #dynamicHeading, .dynamicWord {
               font-size: 60px; /* Cap font size for large screens */
               min-width: 80px;
           }
       }

       /* Ensure text wraps on very narrow screens */
       @media (max-width: 320px) {
           #dynamicHeading, .dynamicWord {
               font-size: 16px;
               min-width: 30px;
           }
       }
   </style>
</head>
<body>
   <div class="wrapper">
       <div id="dynamicHeading">
           Discover the Finest <span class="dynamicWord">Pure</span> Spices
       </div>
   </div>

   <script>
       // Array of words to cycle through
       const words = ["Pure", "Blend", "VIP", "World"];
       let currentIndex = 0;

       // Function to update the dynamic word
       function updateHeading() {
           const dynamicWordElement = document.querySelector(".dynamicWord");
           dynamicWordElement.textContent = words[currentIndex];
           dynamicWordElement.style.animation = "none"; // Reset animation
           dynamicWordElement.offsetHeight; // Trigger reflow
           dynamicWordElement.style.animation = null; // Restart animation
           currentIndex = (currentIndex + 1) % words.length;
       }

       // Preload words and start animation
       window.addEventListener('load', () => {
           words.forEach(word => {
               const span = document.createElement('span');
               span.style.visibility = 'hidden';
               span.textContent = word;
               document.body.appendChild(span);
               document.body.removeChild(span);
           });

           // Initial call
           updateHeading();
           // Update every 3 seconds
           setInterval(updateHeading, 3000);
       });
   </script>
</body>
</html>

bottom of page