🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

watchMe is a jQuery plugin that dynamically swaps out the src value of a given image depending on the direction your mouse enters and leaves.

Hover-Effect

Documentation

npm version npm Known Vulnerabilities License

jQuery watchMe

A jQuery plugin to manipulate image sources depending on hovered image position

Install

npm install jquery-watchme

Demo

See demo on jsFiddle.

Options

// Image default state defaultState: 'straight',  // Speed of fade in ms fadeSpeed: 200,  // Timeout before fade in ms timeout: 300,  // Image elements imageSelector: "img",  // Do we want hover to be different image? hoverImg: false,  // Do we want to add direction classes to images? addClasses: false,

Usage

// Add watchMe to div where your images are $('#watchMe').watchMe();
// Add data attributes to every image <img src="https://placehold.it/150x150&text=look straight" width="150" height="150"   data-watchme-direction-straight="https://placehold.it/150x150&text=look straight"   data-watchme-direction-straighthover="https://placehold.it/150x150&text=look straight hover"   data-watchme-direction-up="https://placehold.it/150x150&text=look up"   data-watchme-direction-upright="https://placehold.it/150x150&text=look upright"   data-watchme-direction-right="https://placehold.it/150x150&text=look right"   data-watchme-direction-downright="https://placehold.it/150x150&text=look downright"   data-watchme-direction-down="https://placehold.it/150x150&text=look down"   data-watchme-direction-downleft="https://placehold.it/150x150&text=look downleft"   data-watchme-direction-left="https://placehold.it/150x150&text=look left"   data-watchme-direction-upleft="https://placehold.it/150x150&text=look upleft" />

Directions (10)

  • Straight data-watchme-direction-[defaultState]
  • Straight hover data-watchme-direction-[defaultState]hover (Requires option hoverImg to be true)
  • Up data-watchme-direction-up
  • Down data-watchme-direction-down
  • Left data-watchme-direction-left
  • Right data-watchme-direction-right
  • Down left data-watchme-direction-downleft
  • Down right data-watchme-direction-downright
  • Up left data-watchme-direction-upleft
  • Up right data-watchme-direction-upright

License

Licensed under MIT


You May Also Like