Direction-aware Image Swap Effect On Hover - jQuery imageLife

File Size: 111 KB
Views Total: 949
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.