Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 

README.md

Lava-Lamp

Description: A jQuery animating navigation plugin. It creates a div that moves when you mouse over an element, giving it an elastic animation.

Author: Richard Hung

More documentation and examples: http://lavalamp.magicmediamuse.com

Install

Install it using Bower:

$ bower install lavalamp

Install it using npm:

$ npm install lavalamp

Or download as ZIP.

Key Features

  • Very lightweight; plugin is only one JavaScript file
  • Allows you to set a new active element on click
  • Calculates margins

How to Use

Lava Lamp has a .js and .css file in addition to the jQuery library. All its animations are done with CSS3 transitions, so you can use or modify the advanced transition-timing-function to create custom easing.

<link type="text/css" href="css/jquery.lavalamp.css" rel="stylesheet" media="screen" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>

Create a container for the plugin and the children elements that you will mouse over.

<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 after the HTML markup and required files.

$('#navlist').lavalamp({
    easing: 'easeOutBack'
});

Style the lava lamp object with CSS.

.lavalamp-object {
	background-color:#ccc;
}
You can’t perform that action at this time.