1.0.1 • Published 5 months ago

gooey-interactive-menu v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Interactive Menu with Animated Bubbles

Application Website

Visit our Application Website for a live demonstration.

This project consists of an interactive menu with animated bubbles, created to add a dynamic and engaging visual experience to your website. The bubbles are stylized and animated randomly, providing a fun and modern touch to user navigation.

Features

  • Stylized Bubbles: Each menu point is represented by a stylized bubble with attractive visual effects.

  • Continuous Animation: Bubbles move randomly within a central area, providing a smooth and constant animation.

  • Configurable Number of Bubbles: The quantity of bubbles in the menu can be easily adjusted to fit your site's design.

  • Responsive: The menu is designed to work responsively across various screen sizes.

How to Use

  1. Including JavaScript and CSS:
    • Add the JavaScript code to your file.
    • Add the CSS code to style the bubbles.
<!-- Include this section in the head of your HTML -->
<link rel="stylesheet" href="path-to-your-file.css">

<!-- Include this section at the end of the body of your HTML -->
<script src="path-to-your-file.js"></script>
  1. HTML:
    • Add a container for the menu in your HTML.
<div class="div-container">
    <!-- The menu will be dynamically added here -->
</div>
  1. Customization:
    • Adjust settings in JavaScript and CSS as needed to match your design preferences.

Benefits

  • Visual Attraction: Bubble animation adds a visual attraction element to your site, making the user experience more engaging.

  • Easy Customization: The number of bubbles and other aspects of the menu can be easily customized to fit your site's style.

  • Smooth Integration: The menu can be seamlessly integrated into any web project, providing a unique experience for visitors.

Basic Configuration Example

// Basic configuration example in your JavaScript file
$(document).ready(function () {
    createBubbles();
    animateBubbles();
});

Example Images

Menu 1 Menu 2 Menu 3

Contributions

Contributions are welcome! If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. Developed by Biasiolo.