lavalamp
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

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

    Install

    npm i lavalamp

    DownloadsWeekly Downloads

    176

    Version

    2.0.0

    License

    none

    Unpacked Size

    161 kB

    Total Files

    30

    Last publish

    Collaborators

    • richardhung