Author: | d2phap |
---|---|
Views Total: | 338 views |
Official Page: | Go to website |
Last Update: | March 12, 2023 |
License: | MIT |
Preview:

Description:
fluent-reveal-effect is a JavaScript library used for creating interactive hover & click effects inspired by Fluent Design System for Windows.
See also:
How to use it:
1. Install and import the fluent-reveal-effect library.
# NPM $ npm install fluent-reveal-effect@latest --save
import { applyEffect } from "fluent-reveal-effect"
2. Apply the hover effect (interactive gradient effect) to the button.
<button class="btn">Hover Me</button>
applyEffect(".btn", { lightColor: "rgba(0,0,0,0.3)", gradientSize: 250 })
3. Apply a Material Design-style ripple effect to the button when clicked.
applyEffect(".btn", { clickEffect: true })
4. Apply a hover effect to the borders of your buttons within a container.
<div class="button-container"> <div class="btn-border"> <button class="btn">Button 1</button> </div> <div class="btn-border"> <button class="btn">Button 2</button> </div> <div class="btn-border"> <button class="btn">Button 3</button> </div> </div>
applyEffect(".button-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 } })
Changelog:
v3.0.1 (03/12/2023)
- TypeScript support