https://github.com/datarhei/clappr-marquee

A marquee plugin for Clappr
https://github.com/datarhei/clappr-marquee

Last synced: about 2 months ago
JSON representation

A marquee plugin for Clappr

• Host: GitHub
• URL: https://github.com/datarhei/clappr-marquee
• Owner: datarhei
• License: mit
• Created: 2020-10-13T12:35:16.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-04-21T11:57:19.000Z (over 3 years ago)
• Last Synced: 2023-11-11T10:53:30.474Z (about 1 year ago)
• Language: JavaScript
• Size: 1.02 MB
• Stars: 1
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# clappr-marquee

Displays a marquee text scrolling from right to left or vice-versa. The marquee is only displayed when the player is

playing and will hide when the player is stopped.

![Snapshot](../main/screenshot.jpg)

## TODO

- Richer text formatting

## Config

```

var player = new Clappr.Player({

	...

	plugins: [Marquee],

	marqueeConfig: {

		text: 'Lorem ipsum ...',

		speed: 10,

		direction: 'left',

		position: 'top',

		offset: '10px',

		pauseOnHover: true,

	},

	...

});

```

The text will be displayed as is. Links will be automatically detected and replaced by a real link:

```

var player = new Clappr.Player({

	...

	plugins: [Marquee],

	marqueeConfig: {

		text: 'Lorem ipsum https://www.example.com ...',

	},

	...

});

```

By default the marquee is displayed at the top of the player with gray background. You can override this by providing

your own styles:

```

var player = new Clappr.Player({

	...

	plugins: [Marquee],

	marqueeConfig: {

		text: 'Lorem ipsum https://www.example.com ...',

		style: {

			backgroundColor: 'green'

		},

		linkStyle: {

			textDecoration: 'none'

		}

	},

	...

});

```

## Config options

Option | Default | Description

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

`text` | (not set) | The text to display. May contain links in Markdown syntax.

`speed` | `10` | Translation speed in pixel per second.

`fps` | `25` | Animation loop resolution.

`direction` | `left` | The direction in which the text will scroll. Either `left` or `right`.

`position` | `top` | Where the marquee should be displayed. Either 'top' or 'bottom'.

`offset` | `0px` | Distance to the top or bottom, depending on the value of `position`.

`pauseOnHover` | `true` | Whether the text should stop scrolling if the mouse hovers it.

`style` | `{}` | CSS styles in DOM syntax for styling the marquee area.

`linkStyle` | `{}` | CSS styles in DOM syntax fot styling the links in the text.

## Develop

Create updated dist files:

```

npm run build

```

or for a minified build:

``` 

npm run release

```