hover-marquee
v1.1.0
Published
Turn text into a marquee on hover to reveal hidden text
Downloads
4
Readme
CSS3 Hover MARQUEE
This is a fork of the html5 marquee by muchweb https://github.com/muchweb/html5-marquee
Installation
- Bower:
bower install hover-marquee
- NPM:
npm install hover-marquee
Usage
Simple usage:
<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
make
This will create css
directory.