Floating.js 🎉

Floating.js is a lightweight library for creating animated floating elements on your webpage. Perfect for festive effects like snowflakes, sparkles, or any other decorative floating items. 🚀

Features ✨

• Customizable elements: Use text, emojis, or even HTML elements.
• Control animation frequency: Adjust the number of floating elements and the interval between appearances.
• Lightweight and modular: No external dependencies.
• Easy-to-use API: Start with minimal setup.

Installation

You can include Floating.js in your project via npm:

npm install --save @janmarkuslanger/floatingjs

Usage

Here’s how to get started with Floating.js:

1. Import the Library

import { Floating } from '@janmarkuslanger/floatingjs';

2. Initialize the Floating Effect

const floating = new Floating({
  elements: ['❄️', '✨', '🎉', '⭐️'], // Elements to float (strings or custom HTML elements)
  maxElements: 20,                  // Maximum number of floating elements (default: 10)
  interval: 1000,                   // Interval in milliseconds between new elements (default: 2000)
});

3. Start or Stop the Animation

// Start the animation
floating.start();

// Stop the animation
floating.stop();

Options 🛠️

| Option | Type | Default | Description | |---------------|---------------------------|-------------------|-----------------------------------------------------------------------------| | elements | string[] or Function[] | [] | Elements to float. Strings (e.g., '⭐️') or functions returning HTML elements. | | maxElements | number | 10 | Maximum number of floating elements visible at any time. | | interval | number (ms) | 2000 | Interval between the creation of new floating elements (in milliseconds). | | root | HTMLElement | document.body | The container where floating elements will be appended. |

Example 🎨

import { Floating } from '@janmarkuslanger/floatingjs';

const snowflakes = new Floating({
  elements: ['❄️', '❅', '❆'], // Snowflake shapes
  maxElements: 30,
  interval: 500,
});

// Start the animation
snowflakes.start();

Advanced Usage 🚀

const customFloating = new Floating({
  elements: [
    '✨',
    () => {
      const customElement = document.createElement('div');
      customElement.textContent = 'Custom!';
      customElement.style.color = 'gold';
      return customElement;
    },
  ],
  maxElements: 15,
  interval: 800,
});

customFloating.start();

Contributing 🤝

We welcome contributions! If you have suggestions, feature requests, or find a bug, please open an issue or submit a pull request.

License 📜

This project is licensed under the MIT License.