Marquee of Stamps

This little trinket shows a sort of marquee of stamps on your site. I think this method works fairly well for my purposes. Maybe it will work for you too? Check out a live version on Code Pen.

There’s all kinds of controversy about whether you ought use the marquee tag on your website in any way, shape, or form. This is because it’s considered “deprecated” by web design professionals. Nevertheless, many people on neocities choose to use it for whatever reason. I’m okay with that, and throw no shade with regards to anyone’s web design choices.

That said, when I wanted a marquee feature on my own site, I decided to avoid use of the deprecated tag, instead opting for a CSS solution. It seems to work fairly well. My primary complaint? The marquee leaves a blank space just before it begins and ends. I cannot seem to be rid of it, though not for lack of trying, believe me. If anyone knows how to get rid of it, do make me aware. I’m eager to learn about these things.

This code assumes each stamp is 56 pixels tall and 99 pixels wide. This seems to be standard for these stamps, at least in terms of dimensions. It scrolls the stamps in an infinite loop across the space where you’ve placed the #marquee element, with that small gap mentioned before at the end. There is no gap between each stamp, but if you’d like one, this is easy to change in the CSS - just add a little padding to the images themselves.

The default settings for this little trinket dim the stamps to a lesser opacity than the elements around them. This prevents the marquee from distracting visitors. The marquee also moves very slowly, which makes it much more subtle. You can easily control the speed in the CSS. When visitors to your site move their cursor over the marquee, it pauses. The stamp the’ve moved their mouse over expands outwards and becomes fully opaque and bright, for a nice eye catch of sorts.

I added a slight dash of optional Javascript at the end, which should work for randomizing the stamps when they’re displayed. This is a fun little feature, and while it sometimes results in the same stamp shown twice in a row, that’s relatively rare if you’ve got quite a few stamps in the rotation. Give it a try if you have more than five or six stamps in rotation.

You can see the marquee on this site within the sidebar, either to the left or at the bottom of the page (on mobile). It features just a few stamps right now, but I’m collecting more every day. If you’d like to donate some, feel free to contact me via any of the information located just below the marquee.

CSS

#marquee {
        width:100%; /* probably be best at 100% within a containing element like a sidebar or header */
        margin:auto; /* keeps it centered lol */
        overflow: hidden;
        white-space: nowrap;
        padding: .5em;
      }
      
      #marquee:hover #stamps {
        animation-play-state: paused; /* remove this line if you'd rather the stamps not pause when the visitor hovers over them */
      }
      
      #stamps {
        display: inline-block;
        will-change: transform;
        animation: marquee 100s linear infinite; /* here, 100s denotes 100 seconds, so change it to the speed you'd like your marquee to flow. slower is better imho */
      }
      
    
    
      #stamps img {
        width: 99px;
        height:56px; /* since most stamps are 56px tall and 99 px wide, i've set the defaults to this */
        opacity:0.5; /* remove the previous line if you don't want your images dimmed as a default */
        transition: all 0.2s;
          position: relative; 
      z-index: 1; 
    
      }
      
      #stamps img:hover {
        transform: scale(1.2); /* remove this if you'd rather they not explode on hover  */
        opacity:1;
          z-index: 100;
      }
      
      @keyframes marquee {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
        }
      }

HTML

<div id="marquee">
    <div id="stamps"> <!-- all your stamps go after this, as regular images -->

        <img src="https://fabled.day/image/signifiers/stamps/pinkds.png">
        <img src="https://fabled.day/image/signifiers/stamps/pokemon.gif">
        <img src="https://fabled.day/image/signifiers/stamps/roses.gif">
        <img src="https://fabled.day/image/signifiers/stamps/sleepy.png">
        <img src="https://fabled.day/image/signifiers/stamps/whoa.gif">
        <img src="https://fabled.day/image/signifiers/stamps/aliens.png">
        <img src="https://fabled.day/image/signifiers/stamps/loveds.png">
        <img src="https://fabled.day/image/signifiers/stamps/nighttime.png">
        <img src="https://fabled.day/image/signifiers/stamps/tea.png">
        <img src="https://fabled.day/image/signifiers/stamps/wtf.gif">
        <img src="https://fabled.day/image/signifiers/stamps/poke.gif">
        <img src="https://fabled.day/image/signifiers/stamps/sims.gif">

      </div>
    </div>

Javascript (Optional)

function stampshuffle() {
        const marquee = document.querySelector('#stamps');
        const stamps = Array.from(marquee.querySelectorAll('img'));
    
        for (let i = stamps.length - 1; i > 0; i--) {
            const randomIndex = Math.floor(Math.random() * (i + 1));
            [stamps[i], stamps[randomIndex]] = [stamps[randomIndex], stamps[i]];
        }
    
        stamps.forEach(img => marquee.appendChild(img));
    }
    
    stampshuffle();