Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: 4 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 (over 6 years ago)
Default Branch: master
Last Pushed: 2024-05-02T08:53:13.000Z (about 2 months ago)
Last Synced: 2024-06-02T18:33:53.818Z (18 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: 214
Watchers: 11
Forks: 23
Open Issues: 3
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Lists

awesome-stars - fluent-reveal-effect
my-awesome-stars - d2phap/fluent-reveal-effect - Fluent Reveal Effect JavaScript library for web (TypeScript)
my-awesome-starred - d2phap/fluent-reveal-effect - Fluent Reveal Effect JavaScript library for web (TypeScript)
awesome-stars - fluent-reveal-effect

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)