# vue-block-reveal

> A vue directive to wrap @crnacura's block revealers.

Latest version **1.0.0** (published 2018-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-block-reveal
pnpm add vue-block-reveal
yarn add vue-block-reveal
bun add vue-block-reveal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-05-25 |
| First published | 2018-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ronik |
| Maintainers | jaredpike |

## Links

- npm: https://www.npmjs.com/package/vue-block-reveal
- Repository: https://github.com/ronik-design/vue-block-reveal
- Homepage: https://github.com/ronik-design/vue-block-reveal#readme
- Issues: https://github.com/ronik-design/vue-block-reveal/issues
- npm.io page: https://npm.io/package/vue-block-reveal

## Dependencies (2)

- [animejs](https://npm.io/package/animejs.md) ^2.2.0
- [scrollmonitor](https://npm.io/package/scrollmonitor.md) ^1.2.4

## Recent versions

- 1.0.0 (latest) — 2018-05-25

## README

# vue-block-reveal

A vue directive to wrap [@crnacura](https://github.com/crnacura)'s [Block Revealers](https://github.com/codrops/BlockRevealers/).

## Install

``` bash
# npm
npm install --save vue-block-reveal
```

``` bash
# yarn
yarn add vue-block-reveal
```

## In Your Stylesheet

``` css
/* The container element */
.block-revealer {
  position: relative;
}

/* The actual block that overlays */
.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}
```

## Default Settings

Options can be passed to `Vue.use` or to individual elements as a value (ie. `v-block-reveal="{ delay: 250, direction: 'rl' }"`).

```js
import VueBlockReveal from 'vue-block-reveal';

Vue.use(VueBlockReveal, {
  direction: 'lr',
  bgcolor: '#ffcb34'
});
```

| Property           | Description                                                                                           | Default Value        |
|------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------|
| direction          | The direction of the wipe. Can be `lr`, `rl`, `bt`, or `tb`.                                          | `lr`                 |
| duration           | How long each half of the transition takes in milliseconds.                                           | 500                  |
| delay              | A delay before the transition occurs in milliseconds.                                                 | 0                    |
| easing             | The easing function. Uses the functions from [anime](http://animejs.com/documentation/#penner).       | `easeInOutQuint`     |
| bgcolor            | The color of the transition                                                                           | `#000`               |
| isContentHidden    | Hides the target before the transition occurs.                                                        | `true`               |
| coverArea          | Percentage-based value representing how much of the area should be left covered.                      | 0                    |


## Usage

```html
<!-- This inherits your default settings in Vue.use -->
<h1 v-block-reveal>Hello world</h1>

<!-- Passing custom settings -->
<h1 v-block-reveal="{ delay: 250, direction: 'rl' }">Hello world</h1>

```

### Credits

- [@crnacura](https://github.com/crnacura) from [Codrops](https://github.com/codrops/)
- [Anime.js](http://animejs.com/)
- [Scrollmonitor](https://github.com/stutrek/scrollMonitor)

---
_Source: https://npm.io/package/vue-block-reveal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._