Animated mouse effect when scrolling over element

Question

So I have been looking for a way to replicate the Land Rover website and adding an animated mouse effect when you use your mouse over an element. For example look at this page: http://www.landroverusa.com/index.html and see what happens when you move your mouse around in the "slider" area. It looks like its CSS to handle the mouse image but how can I replicate the animation of titling the mouse pointer image like the above site?

Here is what I have so far thanks to this link :

<style>
* {
    cursor: none;
}

figure#mouse-pointer {
    background-image: url('http://cdns2.freepik.com/image/th/318-70851.png');
    background-size:44px 44px;
    width: 44px;
    height: 44px;
    position: absolute;
    margin-left: -8px; 
    display: block;
}
</style>

<figure id="mouse-pointer"></figure>


<script>
$(function (){
// Based on example found here: http://creative-punch.net/2014/01/custom-cursors-css-jquery/
    $(window).mousemove(function(event) {
        $('#mouse-pointer').css({
            'top' : event.pageY + 'px',
            'left' : event.pageX + 'px'
        });
    });

});
</script>

Here is a fiddle: https://jsfiddle.net/yqd5xzvc/1/

Answer 1

Here's a stab at this one...

 $(function() { var windowMid = $(window).width() / 2; $(window).mousemove(function(event) { $('#mouse-pointer').css({ 'top': event.pageY + 'px', 'left': event.pageX + 'px' }); if (event.pageX > windowMid) { $('#mouse-pointer').css('transform', 'rotate(180deg)'); } else { $('#mouse-pointer').css('transform', 'rotate(0deg)'); } }); }); 

 * { cursor: none; } figure#mouse-pointer { background-image: url('http://cdns2.freepik.com/image/th/318-70851.png'); background-size: 44px 44px; width: 44px; height: 44px; position: absolute; margin-left: -8px; display: block; transition: 0.5s transform; } .rotate { transform: rotate(180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <figure id="mouse-pointer"></figure> 

Answer 2

You can do this with transform: rotate() and some JS to catch the cursor location:

JS Fiddle Update

$(function () {
    // Based on example found here: http://creative-punch.net/2014/01/custom-cursors-css-jquery/
    $(window).mousemove(function (event) {
        $('#mouse-pointer').css({
            'top': event.pageY + 'px',
                'left': event.pageX + 'px'
        });
        var windowSize = $(window).width();
        var cursorLocation = windowSize / event.pageX;
        if (cursorLocation <= 2) {
            $('#mouse-pointer').addClass('rotate');
        } else {
            $('#mouse-pointer').removeClass('rotate');

        }
    });
});

Added rotate class:

figure#mouse-pointer.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

And applying a transition to the mouse pointer for when it rotates:

figure#mouse-pointer {
    transition: transform .3s;
}