Direction-aware Image Swap Effect On Hover - jQuery imageLife

imageLife is a direction-aware image hover/rollover effect plugin that dynamically swaps the image paths depending on the direction your mouse enters/leaves the current image.

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

How to use it:

1. Include the minified version of the jQuery imageLife plugin after jQuery JavaScript library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="imagelife.min.js"></script>

2. Insert the initial image into the webpage.

<img id="demo" src="center.jpg">

3. Specify the image paths as these:

var config = {
    center : 'center.jpg',
    north: 'north.jpg',
    northeast: 'northeast.jpg',
    east:'east.jpg',
    southeast:'southeast.jpg',
    south:'south.jpg',
    southwest:'southwest.jpg',
    west:'west.jpg',
    northwest:'northwest.jpg',
    click:'click.jpg',
};

4. Activate the plugin and done.

$(function(){
  var instance = imageLife(config).target('#demo');
  $(window).mousemove(function(e){
    instance.start(e);
  });
});

5. More configuration options.

var config = {
    img_type:'', // file type
    adj_top:0,
    adj_bottom:0,
    adj_left:0,
    adj_right:0,
    debug_color:'#00f',
};

6. API methods.

// gets direction
instance.getDirection(e);

// gets offset
instance.getOffset();

// gets dimension
instance.getDimension();

// debug
instance.debug();

7. Available event handlers.

• center
• north
• northeast
• east
• southeast
• south
• southwest
• west
• northwest
• click
• change

instance.on('EventName',function(){
  // do something
});

---

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