Reveal Effect library (Fluent Design System)

Apply reveal effect to border and background of elements.


!Screenshot

$3

- https://imageglass.org/
- https://d2phap.github.io/fluent-reveal-effect/

Install

Run the command
``bash
npm i fluent-reveal-effect@latest
`

NPM package: https://www.npmjs.com/package/fluent-reveal-effect

Usage

$3

`css
.btn {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
padding: 1rem 2rem;
background-color: #333;
color: #fff;
border: 0;

transition: all 200ms ease;
}
.btn-border {
display: inline-block;
margin: 5px;
}
.btn-border .btn {
display: block;
margin: 2px;
}
`

$3

#### HTML
`html
Button 1
`
#### JavaScript
`ts
import { applyEffect } from "fluent-reveal-effect"

// Enable reveal background effect
applyEffect('.btn', {
lightColor: 'rgba(255,255,255,0.1)',
gradientSize: 150,
});

// Enable Ripple click effect
applyEffect('.btn', {
clickEffect: true,
});
``

$3

#### HTML
`html

Button 2

Button 3

Button 4

`

#### JavaScript
`ts
import { applyEffect } from "fluent-reveal-effect"

applyEffect('.effect-group-container', {
clickEffect: true,
lightColor: 'rgba(255,255,255,0.6)',
gradientSize: 80,
isContainer: true,
children: {
borderSelector: '.btn-border',
elementSelector: '.btn',
lightColor: 'rgba(255,255,255,0.3)',
gradientSize: 150
}
})
``

Donate

If you feel this little library useful to you, it would go a great way to ensuring that I can afford to take the time to continue to develop it.

Thanks for your gratitude and finance help!

License