Nobody Pays (for) Magazines

    @spb-web/box-overlay
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.2 • Public • Published

    Main Hero Magic to highlight yourself!

    @spb-web/box-overlay <@spb-web/box-overlay> GitHub issues

    no dependencies, works with animated elements, simple api, typescript, modern, can highlight multiple elements

    Demo | Docs | Issues

    npm bundle size npm bundle size npm version

    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

    Keywords

    none

    Install

    npm i @spb-web/box-overlay

    DownloadsWeekly Downloads

    4

    Version

    0.4.2

    License

    ISC

    Unpacked Size

    22.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • spb-web