@spb-web/box-overlay
v0.4.2
Published
no dependencies, works with animated elements, simple api, typescript, modern, can highlight multiple elements
Downloads
9
Readme
Main Hero Magic to highlight yourself!
no dependencies, works with animated elements, simple api, typescript, modern, can highlight multiple elements
It uses Size Limit to control size.
Install
npm i @spb-web/box-overlay --save
Example
const boxOverlay = new BoxOverlay()
let currentIndex = 0
const selectors = [
['.example-element1'],
['.example-element2'],
['.example-element3'],
['.example-element1', '.example-element2'],
]
setInterval(() => {
currentIndex+=1
currentIndex = currentIndex >= selectors.length ? 0 : currentIndex
boxOverlay.clear()
selectors[currentIndex].forEach(boxOverlay.add)
}, 3000)
TODO:
- [x] Highlight multiple elements
- [x] Handle moving elements
- [x] Rounded corner
- [x] Use Size Limit
- [x] Add events
- [x] Control mouse events
- [ ] Tests
- [ ] Animation
- [x] Capture mouse/touch events
- [x] Use clip-path
- [ ] Centrating highlighted area
- [ ] Optimize scroll