lavalamp

Lava Lamp is a JavaScript plugin for menus. It creates a div that moves when you hover over an element, giving it an elastic animation.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
lavalamp
3882.0.02 years ago8 years agoMinified + gzip package size for lavalamp in KB

Readme

Lava-Lamp
Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.
Author: Richard Hung
More documentation and examples: https://richard1320.github.io/Lava-Lamp/

How to install

Link Files
Lava Lamp has a .js and .css file. All its animations are done with CSS3 transitions, so you can use or modify the advanced transition-timing-function to create custom easing.
<!-- Include the stylesheet -->
<link type="text/css" href="build/css/lavalamp.css" rel="stylesheet" media="screen"/>
<!-- Include the lava lamp plugin -->
<script type="text/javascript" src="build/js/lavalamp.js"></script>

Create HTML
Create a container for the slider and children for the panels. Remember to add a default active element.
<ul id="navlist">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/services.html">Services</a></li>
    <li><a href="/programs.html">Programs</a></li>
    <li><a href="/contact.html">Contact</a></li>
</ul>

Call the plugin
Call the lava lamp plugin after the HTML markup.
const settings = {
    margins: true,
};
const element = document.getElementById("navlist");
const lavalampInstance = new Lavalamp(element, settings);

Style it
The plugin creates a div with the lavalamp__object class in the container. This object stretches with the width and height of the element that you're hovering over.
.lavalamp__object {
    box-shadow: 0 0 5px 0 #999 inset;
}