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.
npm install vue-direction-hover --save-dev
Import the main component:
import Vue from 'vue'
import VueDirectionHover from 'vue-direction-hover'
Vue.use(VueDirectionHover)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.
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>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);
List of all available transitions:
linear
easeInQuad | easeOutQuad | easeInOutQuad
easeInCubic | easeOutCubic | easeInOutCubic
easeInQuart | easeOutQuart | easeInOutQuart
easeInQuint | easeOutQuint | easeInOutQuint
easeInElastic | easeOutElastic | easeInOutElastic
Maybe add more settings?