https://github.com/d2phap/fluent-reveal-effect

Fluent Reveal Effect JavaScript library for web
https://github.com/d2phap/fluent-reveal-effect

css-framework fluent-design fluent-design-system fluent-interface fluent-ui javascript javascript-plugin reveal-effect ui-components ui-kit

Last synced: 3 days ago
JSON representation

Fluent Reveal Effect JavaScript library for web

• Host: GitHub
• URL: https://github.com/d2phap/fluent-reveal-effect
• Owner: d2phap
• License: mit
• Created: 2018-01-10T03:38:38.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-02T08:53:13.000Z (9 months ago)
• Last Synced: 2025-01-12T14:07:00.983Z (10 days ago)
• Topics: css-framework, fluent-design, fluent-design-system, fluent-interface, fluent-ui, javascript, javascript-plugin, reveal-effect, ui-components, ui-kit
• Language: TypeScript
• Homepage: https://d2phap.github.io/fluent-reveal-effect
• Size: 809 KB
• Stars: 218
• Watchers: 11
• Forks: 23
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Reveal Effect library (Fluent Design System)

Apply reveal effect to border and background of elements.

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect?ref=badge_shield)

![Screenshot](https://github.com/d2phap/fluent-ui/raw/master/docs/screenshot.png)

### Demo

- https://imageglass.org/

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

## Install

Run the command

```

npm i fluent-reveal-effect@latest

```

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

## Usage

### Import the library

```js

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

```

### Basic CSS

```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

```html

Button 1

```

#### JavaScript

```js

applyEffect('.btn', {

  lightColor: 'rgba(255,255,255,0.1)',

  gradientSize: 150,

});

```

#### Enable Ripple click effect

````js

applyEffect('.btn', {

  clickEffect: true,

});

````

### Apply border and background effect

#### HTML mockup

```html



  


    Button 2

  

  


    Button 3

  

  


    Button 4

  



```


#### JavaScript

```js

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

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect?ref=badge_large)