Ember Fast Marquee

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

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

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

// application.js
import "ember-fast-marquee/marquee.css";

Or import into your css as your would other third party CSS eg.

/* app.css */
@import "node_modules/ember-fast-marquee/marquee.css";

Then wrap the <Marquee> component around any component or text you'd like to slide.

<Marquee>
  I can be a component, multiple components, plain html or just some text.
</Marquee>

Full Example

All options with defaults

<Marquee
  @fillRow={{false}}
  @play={{true}}
  @pauseOnHover={{false}}
  @pauseOnClick={{false}}
  @direction="left"
  @speed={{20}}
  @delay={{0}}
  @loop={{0}}
  @gradient={{true}}
  @gradientColor="255,255,255"
  @gradientWidth="5%"
  @onFinish={{this.someAction}}
  @onCycleComplete={{this.anotherAction}}
  class="my-own-fancy-class"
>
  <div class="photo">
    <img src="https://i.pravatar.cc/150?img=3" />
  </div>

  <div class="photo">
    <img src="https://i.pravatar.cc/150?img=3" />
  </div>

  <div class="photo">
    <img src="https://i.pravatar.cc/150?img=3" />
  </div>
</Marquee>

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 guide for details.

License

This project is licensed under the MIT License.