https://github.com/Kamide/marquee-element

https://github.com/Kamide/marquee-element

javascript web-components

Last synced: over 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/Kamide/marquee-element
• Owner: Kamide
• Created: 2022-11-01T00:09:32.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-01T00:23:34.000Z (over 3 years ago)
• Last Synced: 2024-10-24T10:06:47.462Z (over 1 year ago)
• Topics: javascript, web-components
• Language: JavaScript
• Homepage:
• Size: 5.86 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# marquee-element

MarqueeElement is a vanilla web component implementation of the now deprecated HTMLMarqueeElement using shadow DOM, templates, slots, constructable style sheets, CSS animations, and ResizeObserver.

## Attributes and Properties

| Attribute   | Property    | Type      | Reflected | Description                                                                                                     |

| ----------- | ----------- | --------- | --------- | --------------------------------------------------------------------------------------------------------------- |

| `disabled`  | `disabled`  | `Boolean` | Yes       | Disables animations when attribute is present or property is `true`.                                            |

| `multiline` | `multiline` | `Boolean` | Yes       | Enables word wrapping when attribute is present or property is `true`.                                          |

| `pausable`  | `pausable`  | `Boolean` | Yes       | Pauses animation on hover when attribute is present or property is `true`.                                      |

| `threshold` | `threshold` | `Number`  | Yes       | When a positive number is given, slotted elements will animate if and only if they overflow the host container. |

## CSS Variables

| Variable                            | Type                                                                                                       | Default          | Read | Write |

| ----------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------- | ---- | ----- |

| `--marquee-element-animation`       | `scroll-left \| scroll-right \| scroll-top \| scroll-bottom \| alternate-horizontal \| alternate-vertical` | `scroll-left`    | Yes  | Yes   |

| `--marquee-element-duration`        | ``                                                                                                   | `60s`            | Yes  | Yes   |

| `--marquee-element-timing-function` | ``                                                                                        | `linear`         | Yes  | Yes   |

| `--marquee-element-iteration-count` | `infinite \| `                                                                                     | `infinite`       | Yes  | Yes   |

| `--marquee-element-width`           | ``                                                                                                 | Host Width (px)  | Yes  | No    |

| `--marquee-element-height`          | ``                                                                                                 | Host Height (px) | Yes  | No    |

Overriding `--marquee-element-width` or `--marquee-element-height` is not recommended.

## Parts

| Identifier | Description                                     |

| ---------- | ----------------------------------------------- |

| `frame`    | Overflow container for the animation container. |

| `marquee`  | Animation container for slotted elements.       |

## Demo

https://kamide.github.io/marquee-element/