滚动元素时的动画鼠标效果

Question

所以我一直在寻找一种复制路虎网站的方法，当你在一个元素上使用你的鼠标时，我会添加一个动画鼠标效果。例如，看看这个页面：http://www.landroverusa.com/index.html，看看在“滑块”区域移动鼠标会发生什么。它看起来像它的CSS来处理鼠标图像，但是我如何复制鼠标指针图像标题的动画，就像上面的站点一样？

到目前为止，多亏了此链接，以下是我所拥有的：

<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>

这里有一个小提琴：https://jsfiddle.net/yqd5xzvc/1/

Answer 1

我来试试这个..。

​

$(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

您可以使用transform: rotate()和一些JS来捕获游标位置：

JS Fiddle更新

$(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');

        }
    });
});

增加的轮转类：

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

并将transition应用于鼠标指针，以便当鼠标指针旋转时：

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