Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evoactivity/ember-fast-marquee
A lightweight Ember component that uses CSS animations to create silky smooth marquees. Inspired by https://github.com/justin-chu/react-fast-marquee
https://github.com/evoactivity/ember-fast-marquee
ember ember-addon embroider javascript marquee slider typescript
Last synced: about 2 months ago
JSON representation
A lightweight Ember component that uses CSS animations to create silky smooth marquees. Inspired by https://github.com/justin-chu/react-fast-marquee
- Host: GitHub
- URL: https://github.com/evoactivity/ember-fast-marquee
- Owner: evoactivity
- License: mit
- Created: 2022-05-23T17:30:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-15T11:04:22.000Z (2 months ago)
- Last Synced: 2024-10-19T13:25:14.334Z (2 months ago)
- Topics: ember, ember-addon, embroider, javascript, marquee, slider, typescript
- Language: Handlebars
- Homepage:
- Size: 2.87 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 53
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
Ember Fast Marquee
==============================================================================
[](https://www.npmjs.com/package/ember-fast-marquee)
[](https://github.com/evoactivity/ember-fast-marquee/actions)
[](https://github.com/evoactivity/ember-fast-marquee/blob/main/LICENSE.md)
Ember Fast Marquee is a lightweight ember component that utilizes the power of CSS animations to create silky smooth marquees.
Inspired by [React Fast Marquee][2]
![demogif][1]
Differences from React Fast Marquee
------------------------------------------------------------------------------
- Automatically duplicates content as many times as necessary
- Use `@fillRow={{true}}` to fill any left over white space if desired
- 1 transform3d animation per marquee
[1]: https://i.imgur.com/f0xMyW6.gif "demo gif"
[2]: https://github.com/justin-chu/react-fast-marquee/
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.24 or above
* Embroider or ember-auto-import v2
Installation
------------------------------------------------------------------------------
```
ember install ember-fast-marquee
```
Usage
------------------------------------------------------------------------------
To use the component, first you need to import `marquee.css` into your application somehow.
If you are using embroider simply import the css into your application
```ts
// application.js
import "ember-fast-marquee/marquee.css";
```
Or import into your css as your would other third party CSS eg.
```css
/* app.css */
@import "node_modules/ember-fast-marquee/marquee.css";
```
Then wrap the `` component around any component or text you'd like to slide.
```hbs
I can be a component, multiple components, plain html or just some text.
```
Full Example
------------------------------------------------------------------------------
All options with defaults
```hbs
```
Component Arguments
------------------------------------------------------------------------------
| Property | Type | Default | Description |
| :-------------- | :-------------------------- | :---------------- | :------------------------------------------------------- |
|`fillRow` | `boolean` | `false` | Whether to fill empty spaces with repeat content
| `play` | `boolean` | `true` | Whether to play or pause the marquee |
| `pauseOnHover` | `boolean` | `false` | Whether to pause the marquee when hovered |
| `pauseOnClick` | `boolean` | `false` | Whether to pause the marquee when clicked |
| `direction` | `"left"` or `"right"` | `"left"` | The direction the marquee is sliding |
| `speed` | `number` | `20` | Speed calculated as pixels/second |
| `delay` | `number` | `0` | Duration to delay the animation after render, in seconds |
| `loop` | `number` | `0` | The number of times the marquee should loop, 0 is equivalent to infinite |
| `gradient` | `boolean` | `false` | Whether to show the gradient or not |
| `gradientColor` | `string` | `"255,255,255"` | The rgb color of the gradient as a string of RGB values separated by commas |
| `gradientWidth` | `number` or `string` | `"5%"` | The width of the gradient on either side, if a number is passed % is used, if a string is passed it is used as is to allow other units to be used |
| `onFinish` | `Function` | `undefined` | A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero. |
| `onCycleComplete` | `Function` | `undefined` | A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead). |
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).