Floating object liberary that changes the position of an element based on the cursor position that makes floating interactive animation effect.
run this command
npm install floating-object
import the package in your project
Add CSS to you HTML
<link rel="stylesheet" href="./node_modules/floating-object/floating.css">
Add JavaScript to you HTML
<script src="./node_modules/floating-object/index.js"></script>
add "floating-container" for parent and "floating-object" for floating object in your HTML
<div id="floating-container">
<img id="floating-object" width="200px" src="./assets/earth.png" alt="🌍 Floating earth ">
</div>
*floating-container is a 100vw * 100vh ID which specifies the mouse interactive area. you can make it smaller but the best performance is when it's full width an height.
Use this function floating-container: it is ID of parent element of floating object floating-object:it is ID of floating object 120: it is coefficient value that effects on object movement for example here the object will floats(moves) maximum 120px based on mouse position
floating('floating-container' , 'floating-object',120);