Lava Lamp Style Liquid Hover Effect - jQuery Lavalamp.js

Lavalamp.js is a jQuery plugin that offers a Lava Lamp style liquid hover effect when your mouse pointer moves between a set of elements.

It's most useful for highlighting elements as they're activated, like nav menus, list items, anchor links, etc. The effect can be easily changed to different styles using CSS.

See Also:

• 10 Best Hover Effect Libraries In JavaScript & CSS

How to use it:

1. To get started, load the jquery.lavalamp.min.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.lavalamp.min.js"></script>

2. Load the latest easing library for additional easing functions. OPTIONAL.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

3. Initialize the plugin on your nav list.

<ul id="demo">
  <li><a href="#1">Menu Item 1</a></li>
  <li><a href="#2">Menu Item 2</a></li>
  <li><a href="#3">Menu Item 3</a></li>
  ...
</ul>

$(function() {
  $('#demo').lavaLamp({
    // options here
  });
});

4. Customize the Lava Lamp hover effect in CSS.

ul li.backLava {
  /* back lava */
}

ul li.leftLava {
  /* left lava */
}

ul li.bottomLava {
  /* bottom lava */
}

ul li.cornerLava {
  /* corner lava */
}

5. Ignore certain items in the nav list using the noLava class.

<ul id="demo">
  <li class="noLava"><a href="#1">Ignore Menu Item 1</a></li>
  <li><a href="#2">Menu Item 2</a></li>
  <li><a href="#3">Menu Item 3</a></li>
  ...
</ul>

6. Set the priority order for the default starting location using the selectedLava class.

<ul id="demo">
  <li><a href="#1">Menu Item 1</a></li>
  <li class="selectedLava"><a href="#2">Selected Menu Item 2</a></li>
  <li><a href="#3">Menu Item 3</a></li>
  ...
</ul>

7. Available options to customize the Lava Lamp hover effect.

$('#demo').lavaLamp({

  // target element
  target: "li",

  // container element
  container: "",

  // easing function
  fx: "swing",

  // animation speed
  speed: 500,

  // click function
  click: function() {
    return true;
  },

  // the ordinal number of the element to be set as selected
  startItem: "",

  // include margins or not
  includeMargins: false,

  // return to the last selectedLava element
  autoReturn: true,
  returnDelay: 0,

  // whether a clicked element should receive the selectLava class and become the most recently selected element
  setOnClick: true,

  // define a starting position
  homeTop: 0,
  homeLeft: 0,
  homeWidth: 0,
  homeHeight: 0,

  // return to the Home starting position
  returnHome: false,

  // auto resize on window resize
  autoResize: false,

  // default classes
  selectClass: "selectedLava",
  homeClass: "homeLava",
  skipClass: "noLava",

  // callbacks
  returnStart: function() {},
  returnFinish: function() {},
  hoverStart: function() {},
  hoverFinish: function() {}
  
});

---

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