fluent-reveal-effect's Introduction

Reveal Effect library (Fluent Design System)

Apply reveal effect to border and background of elements.

Demo

Install

Run the command

npm i fluent-reveal-effect@latest

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

Usage

Import the library

import { FluentRevealEffect } from "fluent-reveal-effect"

Basic 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;
}

Apply background effect

HTML mockup

<button class="btn">Button 1</button>

JavaScript

FluentRevealEffect.applyEffect(".btn", {
	lightColor: "rgba(255,255,255,0.1)",
	gradientSize: 150
})

Enable Ripple click effect

FluentRevealEffect.applyEffect(".btn", {
	clickEffect: true
})

Apply border and background effect

HTML mockup

<div class="effect-group-container">
    <div class="btn-border">
        <button class="btn">Button 2</button>
    </div>
    <div class="btn-border">
        <button class="btn">Button 3</button>
    </div>
    <div class="btn-border">
        <button class="btn">Button 4</button>
    </div>
</div>

JavaScript

FluentRevealEffect.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
	}
})