Skip to content

A recreation of the obsolete <marquee> element using web components!

License

Notifications You must be signed in to change notification settings

cwervo/mar-quee

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<mar-quee>

This is a web component recreating the obsolete <marquee> element.

The point of a web component is that you can use it just like you would any other HTML tag. For instance is you've included <mar-quee> in your page already then the following HTML:

<mar-quee>marquee one</mar-quee>
<mar-quee>marquee one</mar-quee>
<mar-quee>marquee twoooooooooo</mar-quee>

will look like this:

marquee example GIF with three lines of text: "marque one", "marquee twoooooooooo", and "long boiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii"

Usage

Just include <script src="mar-quee.js"></script> at the bottom of your <body>> & you're good to go!

Customizing the element & animation

Customization is available via CSS custom properties:

property default value
--marquee-height 25px
--marquee-width 100px
--marquee-animation-timing-function: linear
--marquee-animation-duration 3s
--marquee-animation-iteration-count infinite

Heavily inspired by <bg-sound>

About

A recreation of the obsolete <marquee> element using web components!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published