How to make marquee text change on every refresh!

I made this tutorial on how to make the marquee text you see on my homepage. Here's how it should look:

You will need two files: marq.js and marq.css. You can name them whatever you'd like, or you can even just embed everything in your HTML directly.

Let's start with the css. Add this first.


 #marquee-container {
  border: 1px solid black;
  background: white;
  color: black; /* text color */
  margin: auto;
  width: 100%;
  max-width: 900px;
  height: 30px;
  overflow: hidden;     /* this hides text as it scrolls in/out */
  position: relative;   /* lets it be absolutely positioned */
  font-size: 20px;
  line-height: 30px;    /* vertically centers one line of text */
  white-space: nowrap;  /* keep the text on one line */
}

This is where the scrolling text will be. It will also create a one-line strip with a fixed height, hide overflow, and set up positioning.

Then we will add this!


#marquee-text {
  position: absolute;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  from { left: 100%; }
  to { left: -100%; }
}

It is absolutely positioned and continuously translated from its starting position to -100%, making it glide left and loop forever. The padding-left: 100% pushes the content off-screen initially so it sorta slides in.

Yeah, that's pretty much it for the css, feel free to edit it however you like! I think this part is pretty straightforward, so now I'll do my best to explain the js :>

So for the js, we can start off by adding our messages. For this tutorial, there will be a welcoming message and 3 random messages.


        // Javascript by caramelpuddinz on neocities 

// Waits until the page has fully loaded before running the code
document.addEventListener('DOMContentLoaded', () => {

  // Your list of random messages will go here
  const messages = [
    "seals are cool",
    "moon jellies are my favourite",
    "what does it feel like to be stung by a jellyfish?",
  ];

// This will grab the 
 with id="marquee-text"
const marqueeText = document.getElementById('marquee-text');


  // This is the special welcome message that only shows the first time
  const welcomeMessage = "welcome~ this message will change every refresh, if you do it right!";

  // Checks if the user has visited before using sessionStorage
  if (!sessionStorage.getItem('visited')) {
    // If not visited, it will show the welcome message
    marqueeText.textContent = welcomeMessage;

    // Then mark that they’ve visited, so next time it won’t show again
    sessionStorage.setItem('visited', 'yes');
  } else {
    // If visited before, it will pick a random message from the list
    const randomIndex = Math.floor(Math.random() * messages.length);
    marqueeText.textContent = messages[randomIndex];
  }
});

That's all for the js, hopefully my comments clear things up

Lastly, put this in your html, wherever you want the message box to be


<div id="marquee-container">
  <div id="marquee-text"></div>
</div>

If you did everything correctly, it should work! The welcoming message will first appear but if you refresh it will display one of the random messages from the list. I hope my tutorial helps, credit would be appreciated :D

© caramelpuddinz 2025 - all rights reserved