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.

Table of contents

- Installation
- Usage
- Example
- License
- TODO

Installation

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

Import the main component:

`javascript
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:
`HTML





`
The above example wont show anything since you havent added any content into the items.

There are few props you can add to your 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:
`HTML





`

Also, you can add custom options for the 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:


Read why you might need container sometimes HERE.

Find all available transitions HERE.

Example


Here is an example use with minimal options
`html

{{ item.title }}

`

Here is an example use with all the options
`html







`

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

TODO

Maybe add more settings?

License

MIT