Lava Lamp Style Liquid Hover Effect - jQuery Lavalamp.js
File Size: | 30.7 KB |
---|---|
Views Total: | 402 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.