Interactive Hover Effect For Nav List – Lava-Lamp

Preview:

Description:

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

See Also:

• Direction-aware Lava Lamp Hover Effect

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>
</ul>

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
      
});