Interactive Hover Effect For Nav List – Lava-Lamp

Category: Animation , Javascript | February 2, 2021
Author: Richard1320
Views Total: 110 views
Official Page: Go to website
Last Update: February 2, 2021
License: MIT


Interactive Hover Effect For Nav List – Lava-Lamp


A simple plain JavaScript library that applies an animated, interactive, customizable, Lava Lamp style hover effect to your navigation list.

See Also:

How to use it:

1. Download the package and include the following JavaScript & CSS files on the page.

<link rel="stylesheet" href="build/css/lavalamp.css" />
<script src="build/js/lavalamp.js"></script>

2. Attach the Lava-Lamp to your nav list and done.

<ul id="example" class="navlist">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Script</a></li>
  <li><a href="#">Com</a></li>
  <li><a href="#">Example</a></li>
const myNavList = document.getElementById("example");
const lavalampExample = new Lavalamp(myNavList);

3. Customize the Lava Lamp hover effect in the CSS.

.lavalamp__object {
  box-shadow: 0 0 5px 0 #999 inset;

4. Set the duration of the animation. Default: 400.

const lavalampExample = new Lavalamp(myNavList,{
      duration: 700

5. Determine whether to enable margins.

const lavalampExample = new Lavalamp(myNavList,{
      margins: true

6. Determine whether the lavalamp moves with click instead of hover.

const lavalampExample = new Lavalamp(myNavList,{
      enableHover: false

7. Specify the time to wait before triggering the effect. Default: 0

const lavalampExample = new Lavalamp(myNavList,{
      delayOn: 100,
      delayOff: 220,

8. Apply an easing function to the effect. Default: ‘ease’.

const lavalampExample = new Lavalamp(myNavList,{
      easing: 'linear'

9. More default options.

const lavalampExample = new Lavalamp(myNavList,{

      // set the new active element on click
      setOnClick: false,

      // CSS selector for the active element
      initActiveQuery: '.active',

      // animate on element focus
      enableFocus: false,

      // Animate on descendant focus
      deepFocus: false

You Might Be Interested In:

Leave a Reply