Author: | d2phap |
---|---|
Views Total: | 2,317 views |
Official Page: | Go to website |
Last Update: | September 7, 2019 |
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:
Install the fluent-reveal-effect library.
# NPM $ npm install [email protected] --save
Apply the hover effect (interactive gradient effect) to the button.
<button class="btn">Hover Me</button>
FluentRevealEffect.applyEffect(".btn", { lightColor: "rgba(0,0,0,0.3)", gradientSize: 250 })
Apply a Material Design-style ripple effect to the button when clicked.
FluentRevealEffect.applyEffect(".btn", { clickEffect: true })
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>
FluentRevealEffect.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:
v1.1.1 (09/07/2019)
- Clean up code and bump version