https://github.com/richard1320/lava-lamp

A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.
https://github.com/richard1320/lava-lamp

animations css css-animations css3 css3-animations lava-lamp mouse

Last synced: 19 days ago
JSON representation

A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.

• Host: GitHub
• URL: https://github.com/richard1320/lava-lamp
• Owner: Richard1320
• Created: 2013-04-20T18:39:11.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2023-03-14T15:09:07.000Z (over 1 year ago)
• Last Synced: 2024-10-19T10:13:48.007Z (27 days ago)
• Topics: animations, css, css-animations, css3, css3-animations, lava-lamp, mouse
• Language: JavaScript
• Homepage:
• Size: 528 KB
• Stars: 38
• Watchers: 6
• Forks: 8
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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](https://magicmediamuse.com/)

More documentation and examples: [https://richard1320.github.io/Lava-Lamp/](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.

```html

```

**Create HTML**

Create a container for the slider and children for the panels. Remember to add a default active element.

```html



    
Home

    
About

    
Services

    
Programs

    
Contact



```


**Call the plugin**

Call the lava lamp plugin after the HTML markup.

```javascript

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.

```css

.lavalamp__object {

    box-shadow: 0 0 5px 0 #999 inset;

}

```