Skip to content

A lightweight Ember component that uses CSS animations to create silky smooth marquees. Inspired by https://github.com/justin-chu/react-fast-marquee

License

Notifications You must be signed in to change notification settings

evoactivity/ember-fast-marquee

Repository files navigation

Ember Fast Marquee

NPM CI Status License

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

demogif

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.