Cursor Move Animation

Home / Web Code Snippet / Cursor Move Animation

Cursor Move Animation

https://youtube.com/shorts/fOZ2q3hyAt8?si=Ju2sOLl1xb602Tva

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title></title>
</head>
<body>
</body>
</html>

CSS CODE:-

*{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        body{
            background: black;
            min-height: 100vh;
            overflow: hidden;
        }
        span{
            position: absolute;
            pointer-events: none;
        }
        span::before{
            content: "\f099";
            font-family: fontawesome;
            font-size: 25px;
            position: absolute;
            color: cyan;
            filter:drop-shadow(0 0 10px cyan);
            opacity: 1;
            animation: animate 1s linear infinite;
        }
        @keyframes animate{
            0%{
                opacity: 0;
                transform: translate(0) rotate(0deg);
            }
            100%{
                opacity: 1;
                transform: translate(200px) rotate(360deg);
            }

        }

JS CODE:-

document.addEventListener("mousemove",function(e){
        let body = document.querySelector('body');
        let x = document.createElement('span');
        let tranformValue = Math.random() * 360;

        x.style.left = e.offsetX+'px';
        x.style.top = e.offsetY+'px';
        x.style.transform = 'rotate('+ tranformValue +'deg)'
        body.appendChild(x);

        setTimeout(function(){
            x.remove();
        },1000)
    })