https://github.com/pshihn/lumin
A JavaScript library to progressively highlight any text on a page.
https://github.com/pshihn/lumin
highlight highlighting javascript
Last synced: about 1 month ago
JSON representation
A JavaScript library to progressively highlight any text on a page.
- Host: GitHub
- URL: https://github.com/pshihn/lumin
- Owner: pshihn
- License: mit
- Created: 2018-06-01T00:15:32.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-02-01T14:23:51.000Z (over 4 years ago)
- Last Synced: 2025-03-28T18:13:06.855Z (about 2 months ago)
- Topics: highlight, highlighting, javascript
- Language: JavaScript
- Homepage: https://lumin.rocks
- Size: 294 KB
- Stars: 545
- Watchers: 9
- Forks: 23
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LuminJS
A JavaScript library to progressively highlight any text on a page.
Great for when you want users to pay attention to some important text.
It can also be used to show progress of a task − Read something while tasks are being completed.
Related buzz words: _Tiny (~1kB gzipped)_, _No-dependency_
Visit [lumin.rocks](https://lumin.rocks/) to see it in action.
**Note**: This does NOT modify the user selection.
## Install
Download the latest from [dist folder](https://github.com/pshihn/lumin/tree/master/dist)
or from npm:
```
npm install --save lumin
```
## Usage
Instantiate **lumin** with a node. All text under that node, including child nodes, will be highlighted. Then call *start* to start highlighting.
```javascript
const luminator = lumin(domNode);
luminator.start(5000); // 5000ms to highlight
```
Or you can manually control the progress
```javascript
// Set progress to 50%
luminator.progress = 50;
```
**Note**: _The node being instantiated with has to be a positioned node. i.e. position is not static for this to work. In most cases, **position:relative** will do the trick._
## Full API
### progress
Numeric property one can set to indicate the progress of the highlight. The value is in percentage (0 to 100). This is useful when showing a progress of a task, e.g., a file upload.
### start(duration)
Start the highlight.
_duration_ is the approximate time in milliseconds the highlighting should take.
**returns** a Promise which is resolved when the highlight ends. The resolved value is __true__ if the animation ends without interruption; __false__ if _stop_ was called.
### stop()
Stops highlighting if it's in progress.
### clear()
Clears the highlighting.
## Examples
See it live in action on [lumin.rocks](https://lumin.rocks/) or view sample code in the [Examples folder](https://github.com/pshihn/lumin/tree/master/examples).
## License
[MIT License](https://github.com/pshihn/lumin/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)