Best way to make a marquee?

[larvapuppy]

I really like those scrolling marquee sections on people's sites where they show off their buttons, stamps, blinkies etc. I'm wondering how to create one that will hold as many graphics as I want. I tried using css animations to do it but it seems to cut off at the width of the page. I think some people might use a script to do it? Any advice is appreciated 

[Memory]

I really like those scrolling marquee sections on people's sites where they show off their buttons, stamps, blinkies etc. I'm wondering how to create one that will hold as many graphics as I want. I tried using css animations to do it but it seems to cut off at the width of the page. I think some people might use a script to do it? Any advice is appreciated 

I'm not sure if this works on neocities but lots of resources carrds have textbox codes.

[Memory]

the <marquee> tag is probably the simplest way 

+ you can always poke around in other people's html/css if you like the way they've done something in particular and want to steal it. just right click and select "view page source" or "inspect" :)

[Melooon]

The classic HTML marquee is the easy option, but its rendering style is very clunky (it moves in jerky steps), that will suit some sites, but you can also do smoother marquees using CSS - this is the code the forum uses:

Code

<span class="marquee"><span>My scrolling text</span></span>

<style>
.marquee span {
    width: max-content;
    display: inline-block;
    animation: marquee 25s linear infinite;
    padding-left: 100%;
}

.marquee span:hover {
  animation-play-state: paused
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
</style>

[larvapuppy]

The classic HTML marquee is the easy option, but its rendering style is very clunky (it moves in jerky steps), that will suit some sites, but you can also do smoother marquees using CSS - this is the code the forum uses:

Thank you! This was what I was looking for. I hope you don't mind, but I have a couple of follow-up questions. I tried it out on my Everyone page here, and there a couple of things that I'd like to change before adding it to my website, but I'm not sure how.

• It looks like the marquee increases the width of the page approximately by the width of the marquee content. Is there a way to avoid this so that the marquee stays "hidden" off-page and doesn't widen the page?
• If I wanted to make a really long marquee, would there be some way to make it 'loop' back around onto itself without there being a space in between the end of the first loop and the start of the 2nd loop?

If Melon or anyone else knows the answers I'd be grateful for the info!

[IndigoGolem]

Thank you! This was what I was looking for. I hope you don't mind, but I have a couple of follow-up questions. I tried it out on my Everyone page here, and there a couple of things that I'd like to change before adding it to my website, but I'm not sure how.

• It looks like the marquee increases the width of the page approximately by the width of the marquee content. Is there a way to avoid this so that the marquee stays "hidden" off-page and doesn't widen the page?
• If I wanted to make a really long marquee, would there be some way to make it 'loop' back around onto itself without there being a space in between the end of the first loop and the start of the 2nd loop?

If Melon or anyone else knows the answers I'd be grateful for the info!

Some docs for you: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/marquee

You can use <marquee width="35%" height="170px"> to set its size. Changing that with CSS style="width:35em; height:72mm;" should also work if you want more options for units.

I'm pretty new to this tag so i don't know how to make it loop. You could try just having several of them, with style="display:inline;" if your browser tries to put each one on its own line as a block element.

[Valery_04]

I made a code snippet for anyone who wants a CSS marquee more accurate to the 'marquee' HTML element, the '-350%' value must be modified depending of the marquee left or how many marquees you have in the page. I hope it works for anyone! 

Code

.marquee {
  display: flex;
  width: auto;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
  animation: marquee 25s linear infinite;
  display: inline-block;
  padding-right: 10px;
}
 
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% { 
    transform: translateX(-350%);
  }
  -350% {
    transform: translateX(0%);
  }
}