Marquee css version

Uses a webcomponent <thempo-marquee> that copies the <ul> a couple of times. You could also server render the copies and just skip the javascript, then you just need the css.

Animation speed can be set using the css custom property --thempo-marquee-duration (maps to animation-duration). The number of times the <ul> needs to be copied can be set using data-num-copies on the <thempo-marquee> element, defaults to 2 (which gives you 3 <ul>'s).

  • Certified premium maphcase, dabbler in code
  • Eleventy
  • Open Props
  • Lightning CSS
  • esbuild
  • Web Components