Search code examples
javascriptanimationkeyframe

Change custom cursor style keyframe animation on hover

I have managed to create custom cursor from div with jQuery, can I also change the cursor style for example: (styling animation keyframes) when hovering over div.

Here is my html code that makes the custom cursor.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>        <style type="text/css" media="screen">
        .verline, .horline {
            border-radius: 20%;
            background-color: #121212;
            position :absolute;
            animation-duration: 400ms;
            animation-timing-function: ease-out;
            animation-iteration-count: 1;
            animation-direction: normal;
            animation-fill-mode: forwards;
        }
        .horline {
            width: 50px;
            height: 3px;
            top: -3px;
            left: -25px;
            animation-name: hormove;
        }
        .verline {
            width: 3px;
            height: 50px;
            top: -27px;
            left: -2px;
            animation-name: vermove;
        }
        @keyframes hormove {
            0% { transform: rotate(0deg); top: -3px; left: -25px; }
            100% { transform: rotate(220deg); top: -19px; left: -25px; }
        }
        @keyframes vermove {
            0% { transform: rotate(0deg); top: -27px; left: -2px; }
            100% { transform: rotate(50deg); top: -12px; left: -2px; }
        }
        #hoverit {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="cursor">
        <div class="horline"></div>
        <div class="verline"></div>
    </div>
    <div id="hoverit"></div>
</body>
<script>
    var ElementCursor = {
        cursorElement: "",
        setCursor: function (cursorId) {
            $('html').css({
                'cursor': 'none'
            });
            $('html').mousedown(function (e) {return false;});
            ElementCursor.cursorElement = cursorId;
            ElementCursor.updateCursor();
        },
        removeCursor: function () {
            $('html').css({
                'cursor': ''
            });
            ElementCursor.cursorElement = '';
        },
        updateCursor: function () {
            $(document).mousemove(function (e) {
                $('#' + ElementCursor.cursorElement).css({
                    'position': 'fixed',
                        'top': e.pageY + 'px',
                        'left': e.pageX + 'px'
                });
            });
        }
    };
    ElementCursor.setCursor("cursor");
</script>
</html>
Solution

  • Sure - just get offset and size of the div to hover on mouse move, use it to determine if the cursor div is left or right from its center and give it a corresponding class.

        $(document).mousemove(function (e) {
        ElementCursor.cursorElement.css({
            'position': 'fixed',
            'top': e.pageY + 'px',
            'left': e.pageX + 'px'
        });
        var width = ElementCursor.hoverElement.outerWidth();
        var left = ElementCursor.hoverElement.offset().left;
        if (e.pageX > left + (width / 2)) {
          ElementCursor.cursorElement.addClass('right');
        } else {
          ElementCursor.cursorElement.removeClass('right');
        }
    });
    ElementCursor.hoverElement.mouseenter(function(e) {
      ElementCursor.cursorElement.addClass('in');
    });
    ElementCursor.hoverElement.mouseleave(function(e) {
      ElementCursor.cursorElement.removeClass('in');
    });

    See it in action: http://plnkr.co/edit/mIlI4BqXlpZ2IjiaNFFR?p=preview