Breaking News: Grepper is joining You.com. Read the official announcement!

mouse cursor smooth

Sasuke Khan answered on April 21, 2022 Popularity 7/10 Helpfulness 3/10

answer mouse cursor smooth

mouse cursor smooth

Comment

.cursor {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            border: 1px solid black;
            transition: all 200ms ease-out;
            position: fixed;
            pointer-events: none;
            left: 0;
            top: 0;
            transform: translate(calc(-50% + 15px), -50%);
        }

        .cursor2 {
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: black;
            opacity: .3;
            position: fixed;
            transform: translate(-50%, -50%);
            pointer-events: none;
            transition: width .3s, height .3s, opacity .3s;
        }

        .cursor.hover {
            background-color: red;
            opacity: 0.5;
        }

        .cursorinnerhover {
            width: 50px;
            height: 50px;
            opacity: .5;
        }


<script>
        var cursor = document.querySelector('.cursor');
        var cursorinner = document.querySelector('.cursor2');
        var a = document.querySelectorAll('a');

        document.addEventListener('mousemove', function(e) {
            var x = e.clientX;
            var y = e.clientY;
            cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
        });

        document.addEventListener('mousemove', function(e) {
            var x = e.clientX;
            var y = e.clientY;
            cursorinner.style.left = x + 'px';
            cursorinner.style.top = y + 'px';
        });

        document.addEventListener('mousedown', function() {
            cursor.classList.add('click');
            cursorinner.classList.add('cursorinnerhover')
        });

        document.addEventListener('mouseup', function() {
            cursor.classList.remove('click')
            cursorinner.classList.remove('cursorinnerhover')
        });

        a.forEach(item => {
            item.addEventListener('mouseover', () => {
                cursor.classList.add('hover');
            });
            item.addEventListener('mouseleave', () => {
                cursor.classList.remove('hover');
            });
        })
    </script>

Popularity 7/10 Helpfulness 3/10 Language css

Source: 127.0.0.1

Tags: css mouse-cursor

Link to this answer
Share Copy Link

Contributed on Apr 21 2022

Sasuke Khan

0 Answers Avg Quality 2/10

mouse cursor smooth

Contents

More Related Answers

mouse cursor smooth

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.