# hover-marquee

> Turn text into a marquee on hover to reveal hidden text

Latest version **1.1.0** (published 2016-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install hover-marquee
pnpm add hover-marquee
yarn add hover-marquee
bun add hover-marquee
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2016-01-25 |
| First published | 2016-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | arschmitz |
| Maintainers | arschmitz |
| Keywords | hover, marquee |

## Links

- npm: https://www.npmjs.com/package/hover-marquee
- Repository: https://github.com/arschmitz/html5-marquee
- Homepage: http://arschmitz.me/
- Issues: https://github.com/arschmitz/html5-marquee/issues
- npm.io page: https://npm.io/package/hover-marquee

## Recent versions

- 1.1.0 (latest) — 2016-01-25
- 1.0.0 — 2016-01-25

## README

# CSS3 Hover MARQUEE [![npm version](https://badge.fury.io/js/hover-marquee.svg)](http://badge.fury.io/js/hover-marquee)
### This is a fork of the html5 marquee by muchweb [https://github.com/muchweb/html5-marquee](https://github.com/muchweb/html5-marquee)
## Installation

- Bower: `bower install hover-marquee`
- NPM: `npm install hover-marquee`

## Usage

### Simple usage:

```html
<div class="marquee" data-marquee="Text contents"></div>
```

### Adjust marquee speed:

|CSS Class|Delay|
|:---:|:---:|
|`.marquee-speed-drowsy`|`30s`|
|`.marquee-speed-slow`|`20s`|
|`.marquee-speed-normal`|`10s` (default)|
|`.marquee-speed-fast`|`7s`|
|`.marquee-speed-swift`|`5s`|
|`.marquee-speed-hyper`|`2s`|

#### Custom speed:

Inherits the speed from the class or inline style

|CSS Class|Delay|
|:---:|:---:|
|`.marquee-speed-custom`|`inherit`|

### Adjust direction:

|CSS Class||
|:---:|:---:|
|`.marquee-direction-left`|Right to left (default)|
|`.marquee-direction-right`|Left to right|
|`.marquee-direction-alternate`|Alternate movement|

### Adjust direction:

|CSS Class||
|:---:|:---:|
|`.marquee-direction-left`|Right to left (default)|
|`.marquee-direction-right`|Left to right|
|`.marquee-direction-alternate`|Alternate movement|

### Vintage effect:

|CSS Class||
|:---:|:---:|
|`.marquee-movement-smooth`|Smooth animation (default)|
|`.marquee-movement-steps20`|Jamming animation|
|`.marquee-movement-steps10`|Jamming animation|

## Building

Requirements:

 - Node.js
 - NPM
 - GNU Make

```bash
make
```

This will create `css` directory.

---
_Source: https://npm.io/package/hover-marquee · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._