Dynamically changing the background of header/footer

Ask the community
, ,
1

Question:
I want to change the header and footer color dynamically, constantly and smoothly

Product:
Wix Studio Editor / Code

What are you trying to achieve:
I want to cycle through all colors there are, smoothly, indefinetly

What have you already tried:
Here is the code in which i tried a few things already:

// Wait until the Wix page is fully loaded
$w.onReady(function () {
  // Start color animation for sections (example: #section4, #section5)
  startColorAnimation(['#section4', '#section5']);
});

// Function to animate the background color
function startColorAnimation(sectionIds) {
  if (!Array.isArray(sectionIds)) {
    sectionIds = [sectionIds]; // If only one section is passed, make it an array
  }

  let hue = 0; // Starting value for hue (HSL color model)

  // Interval to change color every 100 milliseconds
  setInterval(() => {
    hue = (hue + 1) % 360; // Gradually change hue, in range 0-359

    // Convert HSL to RGB
    const rgbColor = hslToRgb(hue, 50, 95); // Saturation 50%, Lightness 95%

    // Set the new background color for all specified sections
    sectionIds.forEach(sectionId => {
      const section = $w(sectionId);
      if (section) {
        // For each section, use style.backgroundColor directly
        section.style.backgroundColor = rgbColor;
      }
    });
  }, 100); // 100 ms interval
}

// Function to convert HSL to RGB
function hslToRgb(h, s, l) {
  s /= 100;
  l /= 100;

  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));

  const r = Math.round(f(0) * 255);
  const g = Math.round(f(8) * 255);
  const b = Math.round(f(4) * 255);

  return `rgb(${r}, ${g}, ${b})`;
}

Additional information:
I also looked into the dev api reference but could not find any relevant information there…
It also states that I shoudl change the colour accordingly, which I did:

$w("#section3").style.backgroundColor = "rgba(255,0,0,0.5)";

Additional Info from the Console in Browser:

Uncaught TypeError: Cannot set properties of undefined (setting 'src')
    at eval (masterPage.js:28:30)

For help why this is not working I would be very thankful…

Best regards,

Johannes

2

I think the easiest way to accomplish a header that animates through colors would be with css. Here’s an example that cycles. I cannot embed video here but if you paste this into your site css file it should work (you have to run the code in preview to see it)

@keyframes colorCycle {
  0% { background: red; }
  16.67% { background: orange; }
  33.33% { background: yellow; }
  50% { background: green; }
  66.67% { background: blue; }
  83.33% { background: indigo; }
  100% { background: violet; }
}

/* Apply the animation to the header */
.header {
    
  animation: colorCycle 10s infinite;
  transition: background 1s linear;
}
1 Like
3

Thanks for the Inevitable easy answer, it worked! next time I will try to think of CSS :man_facepalming:

1 Like