Marquee

A row of items scrolls sideways without end and speeds up while the page scrolls.

enhancer
loop
scroll
logos
ticker
since 0.1

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Marquee example

Text · Cards · Scroll · Backgrounds · WebAssembly ·

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<div class="demo-marquee" data-motion="marquee" data-speed="50"><span>Text</span> · <span>Cards</span> · <span>Scroll</span> · <span>Backgrounds</span> · <span>WebAssembly</span> ·</div>

import { Marquee } from "./motion/react/Marquee";

<Marquee>Your content</Marquee>

<script setup lang="ts">
import Marquee from "./motion/vue/Marquee.vue";
</script>

<template>
  <Marquee>Your content</Marquee>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "marquee";

The wrappers: Marquee.tsx (React, TypeScript) and Marquee.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-speed`	`60`	pixels per second
`data-motion-direction`	`left`	`left` or `right`
`data-motion-velocity`	`1`	how much page scrolling speeds it up (0 = none)
`data-motion-pause`	`true`	stops while the pointer is over it

motion.css keeps the box one clipped line from the first paint, so starting it moves nothing. The copies are hidden from screen readers and the tab order. Stops off screen and in hidden tabs. Reduced motion: the line stays still.

Size

marquee.js is 0.8 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.