Floaty.js

Floaty is a lightweight, vanilla JS floating element library.

Screenshot

Features

• Create multiple floating elements in one page.
• Multiple config options.

Installation

To install Floaty, follow these steps:

<script src="https://unpkg.com/floaty.js/src/floaty.js"></script>
or
<script src="./src/floaty.js"></script>

Usage

To use Floaty, follow these steps:

Floaty({
    /*configure*/
});

Configure

Floaty({
    speed: 100, // Move speed
    statuX: 1, // Range of motion X
    statuY: 1, // Range of motion Y
    randomStatus: false, // Random range of motion
    x: 10, // Initial position X
    y: 10, // Initial position Y
    randomPosition: false, // Random initial position
    closeButton: false, // ※Close button
    closeButtonPosition: 'inner', // ※Close button position: inner, outer
    img: "https://placehold.co/300x300/000/fff", // ※Image URL
    imgWidth: '200px', // ※Image width
    imgHeight: 'auto', // Image height
    url: null, // ※Click on the image to jump to the address
});

Example

Floaty({
    closeButtonPosition: 'outer',
    img: "https://placehold.co/300x300/000/fff",
    imgWidth: '300px',
    url: "https://www.example.com",
});

License

Floaty is released under the MIT License