This zone is sleeping right now! ZzzZZzzz

Better not disturb it! ~You go to the petrol station and buy a slushy instead, everything is cool!~

This area will open again in 000.beats!

(Learn about Swatch Time)

Some other zones are awake :^]


Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
Autumn, 19 Oct 2026 - @895.68
Forum Activity: Two Stars Random | Recent Posts | Guild Recents
News: :ha: :pc: Hello Melonland! :pc: :happy: Guild Events: Weekly zine jam 17: Fashion
Super News: ~~MelonLand's Halloween Profile Design Contest 2026~~
+  MelonLand Forum
|-+  Da Web Revival
| |-+  ✁ ∙ Web Crafting
| | |-+  ♺ ∙ Snippets & Materials
| | | |-+  Infinite scrolling marquee ribbon for your website!

 « previous next »
Pages: [1] Print Embed
Author Topic: Infinite scrolling marquee ribbon for your website!  (Read 298 times)
Rubbereon
Sr. Member ⚓︎
****
View Profile WWWArt


⛺︎ My Room
SpaceHey: Friend Me!
Matrix: Chat!
XMPP: Chat!
OS: Linux 🐧

Guild Memberships:
Artifacts:
NoSmoking!Hope, the silliest ink kittayyVisited on Melon's 10th Anniversary!Joined 2025!
« on: Autumn, 27 Sep 2026 @660 » Embed
Using nothing more than background-image.

Code
<style>
    	.marquee {
    		background: url("[Link to image]") repeat-x;
    		width: 200%; /*Body must be 100% or 100vw otherwise the end of repeating image can be seen due to scrollbars. Alternatively you can simply disable scrollbars on your webpage.*/
    		height: 40px; /*Must be equal to the height of the image of it will be cropped*/
    		animation: slide 60s linear infinite;
    	}
    	@keyframes slide{
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0); /*May need to be changed to prevent jitter, see demo where this value is set to 47.5%*/
  }
}
    </style>
The marquee class must be placed on an element which is itself inside another element with  overflow:hidden; height: 40px;, and width: 200%; in case the marquee element goes outside for no reason. I would also recommend giving body and html "margin: 0" to avoid cuts on both the left and right sides, but it's not absolutely necessary, maybe you can do it too with position: absolute.

Here's a quick demo of the thing: https://htmltoolz.com/s/fresh-aurora-750/  :smile:

Logged
https://bettysgraphics.neocities.org/images/animals/cat%20695.gifFuzzy fwiendhttps://bettysgraphics.neocities.org/images/animals/cat%20696.gifhttps://bettysgraphics.neocities.org/images/animals/cat%20697.gif
https://rubbereon.nekoweb.org/img/penguin.gifLinux userhttps://rubbereon.nekoweb.org/img/penguin.gif
↓ All my web profiles are available on this website ↓
https://fursona.directory/@rubbereon :goL:
https://rubbereon.nekoweb.org/img/tabs.gifhttps://rubbereon.nekoweb.org/img/idiotsticker.pnghttps://rubbereon.nekoweb.org/img/iblockads.gif
Artifact Swap: Kitty playing HopscotchGreen SpiffoJust CheeseMerry Christmaskitty paw(print)smileyNow thats a great sun
Rubbereon
Sr. Member ⚓︎
****
View Profile WWWArt


⛺︎ My Room
SpaceHey: Friend Me!
Matrix: Chat!
XMPP: Chat!
OS: Linux 🐧

Guild Memberships:
Artifacts:
NoSmoking!Hope, the silliest ink kittayyVisited on Melon's 10th Anniversary!Joined 2025!
« Reply #1 on: Autumn, 27 Sep 2026 @866 » Embed
Copy and paste this into https://html.onlineviewer.net/ to see how it works.
Code
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    	.marquee {
    		background: url("https://placehold.co/200x40") repeat-x;
    		width: 200%;
    		height: 40px;
    		animation: slide 20s linear infinite;
    	}
    	@keyframes slide{
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-47.5%, 0, 0);
  }
}
    </style>
</head>
<body style="width:100%;background-image:url(/bg/227s.jpg)">
<div style="width: 200%;height: 40px;overflow:hidden"><div class="marquee"></div></div>
</body>
</html>
The link I posted in the thread no longer works and I don't think anybody has noticed it so I'm dropping the working code in a reply so people can see how it works.
Logged
https://bettysgraphics.neocities.org/images/animals/cat%20695.gifFuzzy fwiendhttps://bettysgraphics.neocities.org/images/animals/cat%20696.gifhttps://bettysgraphics.neocities.org/images/animals/cat%20697.gif
https://rubbereon.nekoweb.org/img/penguin.gifLinux userhttps://rubbereon.nekoweb.org/img/penguin.gif
↓ All my web profiles are available on this website ↓
https://fursona.directory/@rubbereon :goL:
https://rubbereon.nekoweb.org/img/tabs.gifhttps://rubbereon.nekoweb.org/img/idiotsticker.pnghttps://rubbereon.nekoweb.org/img/iblockads.gif
Artifact Swap: Kitty playing HopscotchGreen SpiffoJust CheeseMerry Christmaskitty paw(print)smileyNow thats a great sun
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
@000 Melon
Land Forum Art Hub Chat Webring Everyone Site Explore Random Recent Tenement Arcade Want to Login or Join ? Guides Web Craft Guide Graphic Catalogue Wiki Help I'm Lost! Community Link Land Newsletters Image Stream Minecraft: Online

Forum Theme Picker

 Search Zap! Friendly Sites
Passport Sites tamaNOTchi Asatte Add your site?
Aero Archive Onio Cafe 32 Bit Cafe Status Cafe