https://github.com/nickcolley/pwc-marquee
https://github.com/nickcolley/pwc-marquee
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/nickcolley/pwc-marquee
- Owner: NickColley
- Created: 2019-02-27T19:46:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T12:39:15.000Z (about 3 years ago)
- Last Synced: 2025-01-15T16:56:34.688Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://nickcolley.github.io/pwc-marquee/example/
- Size: 26.4 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Progressive Web Component: Marquee
A re-implementation of the [obsolete marquee](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee).
This is a project done for fun and I would definitely not recommend using this in a real service, as the marquee element was made obsolete for a real reason :).
## How to use
### Use from CDN
```html
Scrolling text is fun
import Marquee from "https://unpkg.com/pwc-marquee"
window.customElements.define('pwc-marquee', Marquee)
```
### Install from npm
```bash
npm install pwc-marquee
```
```html
Scrolling text is fun
import Marquee from "pwc-marquee"
window.customElements.define('pwc-marquee', Marquee)
```
> Note: you can choose what the custom element is called by changing `pwc-marquee` to what you prefer.
## Features
[TODO document what attributes you can use, see example/index.html for now]
## Improvements over the original marquee element
- Smooth rendering cross-browser
Think of a cool effect that could be added?
Feel free to raise an issue or contribute it.
## Progressive Enhancement
As this is a progressive web component, for browsers that do not support custom elements, it will fallback to regular text.
## To do / Known issues
- implement [marquee events](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee#Event_handlers)
- implement [marquee methods](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee#Methods)
- If a user changes the size of their screen, the component does not currently adjust correctly.
- Consider using shadow DOM to make the HTML output cleaner