/vue-block-reveal

A vue directive to wrap @crnacura's Block Revealers.

Primary LanguageJavaScript

vue-block-reveal

A vue directive to wrap @crnacura's Block Revealers.

Install

# npm
npm install --save vue-block-reveal
# yarn
yarn add vue-block-reveal

In Your Stylesheet

/* 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' }").

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

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