Java-Scripts.net

Fading Dynamic Content 2.0

Capture attention with movement. This script cycles through a list of messages, headlines, or links, fading them in and out smoothly. It is perfect for news tickers, testimonials, or highlighting features in a limited space.

Live Rotator Demo

Welcome to Java-Scripts.net

Wait a moment to see the text fade and change.

Copy the Script

<div id="fadeContent" style="transition: opacity 0.5s; opacity: 1;">Loading...</div>

<script>
// Fading Content Rotator
var messages = [
  "Check out our new scripts!",
  "<a href='#'>Click here for updates</a>",
  "Simple, fast, and effective."
];
var index = 0;
var el = document.getElementById("fadeContent");

setInterval(function() {
  el.style.opacity = 0; // Fade out
  setTimeout(function() {
    index = (index + 1) % messages.length;
    el.innerHTML = messages[index];
    el.style.opacity = 1; // Fade in
  }, 500); // Wait for fade out to finish
}, 3000); // Change every 3 seconds
</script>

Frequently Asked Questions

You can add as many items as you like to the messages array. The script uses the modulus operator % to loop back to the start automatically.

Yes. Change the transition: opacity 0.5s in the CSS/style tag to make the fade slower (e.g., 1.0s) or faster (e.g., 0.2s). Ensure you match the JavaScript setTimeout delay to the new speed.

This script uses modern CSS transitions which work in all major browsers (IE10+). For very old browsers (IE6-8), the content will still change, but the fade effect may be an instant cut instead.