Swap Out Images Based On The Direction You Move With The Mouse - watchMe

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.

See also:

• Direction-aware Gallery Hover Effect With jQuery - SnakeGallery
• Direction-aware Hover Effect Plugin For jQuery - focus-follow
• Mouse-aware Parallax Effect with jQuery and TweenMax - Mouse Parallax
• Mouse Direction-aware jQuery Hover Effect Plugin - Directional Hover
• Mouse-aware Sliding Overlays with jQuery and CSS3
• Simple jQuery Direction Aware Hover Animation Plugin - Hover Direction
• Direction-aware Hover Effect with jQuery SlipHover Plugin
• Image Direction-Aware Hover Effect with jQuery and CSS3
• Direction-aware Image Swap Effect On Hover - jQuery imageLife

How to use it:

1. Install & Download.

# NPM
$ npm install jquery-watchme --save

2. Load the watchMe plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="dist/jQuery.watchMe.js"></script>

3. Or from a CDN.

<script src="https://unpkg.com/[email protected]/dist/jQuery.watchMe.min.js"></script>

4. Insert a container into the page and specify the paths to different images in the data-* attributes as follows:

<div class="imgWrapper">
  <img src="regular.jpg"
       data-watchme-direction-straight="straight.jpg"
       data-watchme-direction-straighthover="straighthover.jpg"
       data-watchme-direction-up="up.jpg"
       data-watchme-direction-upright="upright.jpg"
       data-watchme-direction-right="right.jpg"
       data-watchme-direction-downright="downright.jpg"
       data-watchme-direction-down="down.jpg"
       data-watchme-direction-downleft="downleft.jpg"
       data-watchme-direction-left="left.jpg"
       data-watchme-direction-upleft="upleft.jpg"
  >
</div>

5. Call the function on the top container. That's it.

$('#watchMe').watchMe();

6. Possible options to customize the plugin.

$('#watchMe').watchMe({

  // initial state
  defaultState: 'straight',

  // animation speed
  fadeSpeed: 200,

  // timeout in ms
  timeout: 300,

  // image elements
  imageSelector: "img",

  // swap images on hover
  hoverImg: false,

  // add direction classes to images
  addClasses: false

});

---

This awesome jQuery plugin is developed by renekorss. For more Advanced Usages, please check the demo page or visit the official website.