Direction-aware Hover Effect Plugin For jQuery - focus-follow

File Size: 6.47 KB
Views Total: 2109
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Direction-aware Hover Effect Plugin For jQuery - focus-follow

focus-follow is a small and customizable jQuery plugin which applies direction aware, responsive hover effects to your html elements for bring your user's attention to current hovered element. The goal of the plugin is to create custom CSS background or foreground overlays with radial borders on html elements that follow you focus when mouse hover.

See also:

Basic usage:

1. Add jQuery JavaScript library and the jQuery focus-follow plugin to your webpages.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jquery.focus-follow.js"></script>

2. Just call the function on the target elements and done.

$("#element").focusFollow();

3. Customize the hover focus effect with the following options.

$("#element").focusFollow({

  // parent container
  wrapper: '#container',

  // overlay color
  color: "orange",

  // animation speed
  speed: 400,

  // opacity level
  opacity: 1,

  // fades out overlay
  timeout: 200,

  // margin in pixels
  margin: 2,
  margin_horizontal: 2,
  margin_vertical: 2,

  // border radius
  border_radius: auto,

  // z-index
  z_index: -1

});

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