Vue-direction-hover NPM

Vue Component - Direction Hover Effect

Vue.js Component for the Direction Hover Effect. You can see a demo here: DEMO I'd like to thank: DirectionAwareHoverEffect for the inspiration in making this component.

Installation

npm install vue-direction-hover --save-dev

Import the main component:

import Vue from 'vue'
import VueDirectionHover from 'vue-direction-hover'

Vue.use(VueDirectionHover)

Usage

In order to use this component, you need to include the tags in your project. For example:

<vue-dh>
  <vue-dh-item></vue-dh-item>
  <vue-dh-item></vue-dh-item>
  <vue-dh-item></vue-dh-item>
</vue-dh>

The above example wont show anything since you havent added any content into the items. There are few props you can add to your <vue-dh-item></vue-dh-item> tag:

Name	Type	Default	Description
link	String	'#'	Link of the item.
image	String	''	Image of the item
target	Boolean	true	true: _blank, false: _self
item-class	String	''	Additional class of the item

You can also custom overlay slot in vue-dh-item:

<vue-dh-item>
  <div slot="overlay">Any HTML you want.</div>
</vue-dh-item>

Also, you can add custom options for the <vue-dh></vue-dh> tag as well:

Name	Type	Default	Description
container	String	'body'	Container holding the items.
transition	String	'linear'	Transition type
speed	Number	300	Speed of the transition

And you can add it like this: <vue-dh :container="'body'" :transition="'linear'" :speed="300">

Read why you might need container sometimes HERE. Find all available transitions HERE.

Example

Here is an example use with minimal options

<vue-dh>
  <vue-dh-item v-for="item in items" :key="'item-' + id" :link="item.link" :image="item.image">
  	<div slot="overlay"> {{ item.title }} </div>
  </vue-dh-item>
</vue-dh>

Here is an example use with all the options

<vue-dh :container="'#content'" :transition="'easeInElastic'" :speed="500">
  <vue-dh-item v-for="item in items" :key="'item-' + id" :link="item.link" :image="item.image" :item-class="'additionalClass'">
  	<div slot="overlay">
  		<h1>{{ item.title }}</h1>
  		<p>{{ item.description }} </p>
  	</div>
  </vue-dh-item>
</vue-dh>

Container

So the question is when to modify the container property? Lets say that you have a page that has sidebar (30% of the page), and main content (70%) of the content. Then, in order for this plugin to work, you must change the container to .main-content, because if you havent do that, than the position of the in/out animations will be relative to the body of the page, and not to the content. Tldr; use this when you are not rendering the items in a container that is not 100% width (container.width = body.width);

Transitions

List of all available transitions:

linear
easeInQuad | easeOutQuad | easeInOutQuad 
easeInCubic | easeOutCubic | easeInOutCubic 
easeInQuart | easeOutQuart | easeInOutQuart
easeInQuint | easeOutQuint | easeInOutQuint 
easeInElastic | easeOutElastic | easeInOutElastic