Home>

I had a mouse stalker, but when I scroll, it goes out of the screen and appears again when I move the mouse at that position. I want to fix this position even if I scroll this like a normal mouse.

Applicable source code
/* =================================== ====
    Mouse stalker
    ========================================= * /
  var
  cursor = $(". cursor"),
  follower = $(". follower"),
  cWidth = 20, // Cursor size
  fWidth = 40, // Follower size
  delay = 10, // If the number is increased, the follower will be delayed more
  mouseX = 0, // Mouse X coordinate
  mouseY = 0, // Mouse Y coordinate
  posX = 0, // follower X coordinate
  posY = 0;// X coordinate of follower
  // Delayed cursor animation
  // delay only a little-0.001 seconds
  TweenMax.to ({}, .001, {
    repeat: -1,
    onRepeat: function () {
      posX + = (mouseX-posX)/delay;
      posY + = (mouseY-posY)/delay;
      TweenMax.set (follower, {
          css: {
            left: posX-(fWidth/2),
            top: posY-(fWidth/2)
          }
      });
      TweenMax.set (cursor, {
          css: {
            left: mouseX-(cWidth/2),
            top: mouseY-(cWidth/2)
          }
      });
    }
  });
  // Get mouse coordinates
  $(document) .on ("mousemove", function (e) {
      mouseX = e.pageX;
      mouseY = e.pageY;
  });
  $("a"). on ({
    "mouseenter": function () {
      cursor.addClass ("is-active");
      follower.addClass ("is-active");
    },
    "mouseleave": function () {
      cursor.removeClass ("is-active");
      follower.removeClass ("is-active");
    }
  });

. cursor,
  .follower {
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  .cursor {
    width: 20px;
    height: 20px;
    background-color: # f24e54;
    z-index: 1001;
    &.is-active {
        transform: scale (1);
        background-color: # f24e54;
      }
  }
  .follower {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba (# f24e54, .5);
    z-index: 1000;
    transition: transform ease .1s;
    text-align: center;
    span {
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      transform: scale (0);
    }
    &.is-active {
      transform: scale (3);
      background-color: rgba (# f24e54, .5);
    }
  }

When I set .follower {position: absolute;} to .follower {position: fixed;}, the main visual is ideal, but when I scroll down, it behaves strangely. It was.

  • Answer # 1

    After using

    fixed, use clientX/clientY to improve.

    // mouseX = e.pageX;
          // mouseY = e.pageY;
          mouseX = e.clientX;
          mouseY = e.clientY;


    https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY

Related articles