Cursor follow effect doesn't follow the user down the screen on scroll-CodePudding

I have a cursor follow effect on my new landing page:
https://tiny-cendol-e90774.netlify.app/

For some reason when you scroll down the page, the cursor doesn't follow you down?

Here's the code below:

const Layout = ({children}) => {

  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  useLayoutEffect(() => {
    document.onmousemove = (event) => {
      var e = event;
      setX(e.clientX);
      setY(e.clientY);
    };
  });

  return (
    <div className={styles.layout}>
      <div style={{top: y - 14, left: x - 14}} className={styles.cursor} />;
      <Header />
      {children}
      <Footer />
    </div>
  )
}

And here's the styles:

.cursor {
  width: 30px;
  height: 30px;
  display: none;
  border-radius: 50%;
  position: absolute;
  border: 2px solid $white;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);

  &:after {
    top: 50%;
    left: 50%;
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    background-color: $white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  @media all and (min-width: $tablet) {
    display: block;
  }
}

I'm assuming that the e.clientX and e.clientY have no context of the browser dimensions, so aren't working on scroll.

CodePudding user response：

You can use the event.pageX and event.pageY properties to obtain the mouse position from the page start.

const Layout = ({children}) => {

  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  useLayoutEffect(() => {
    document.onmousemove = (event) => {
      var e = event;
      setX(e.pageX);
      setY(e.pageY);
    };
  });

  return (
    <div className={styles.layout}>
      <div style={{top: y - 14, left: x - 14}} className={styles.cursor} />;
      <Header />
      {children}
      <Footer />
    </div>
  )
}

This will fix your issue, but it doesn't update the cursor while scrolling.

I'm not sure if you want to use useState for the purpose of moving a cursor on the screen. You can use a ref as well for this purpose. Also, don't forget to clear the event listener when the component un mounts (even when you never unmount the Layout component).

const Layout = ({ children }) => {
  const cursorRef = useRef();

  useLayoutEffect(() => {
    const handleMouseMove = (event) => {
      if (cursorRef.current) {
        cursorRef.current.style.top = `${event.pageY}px`;
        cursorRef.current.style.left = `${event.pageX}px`;
      }
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  });

  return (
    <div className={styles.layout}>
      <div className="cursor" ref={cursorRef} />
      <Header />
      {children}
      <Footer />
    </div>
  )

CodePudding user response：

The behavior subject is a type of subject in RxJS, which is a library for reactive programming in JavaScript. A behavior subject allows you to track the current value of a subject, as well as any changes to that value over time. To use a behavior subject in a service function, you can follow these steps:

Import the behavior subject and the observable operators you want to use from the RxJS library. For example:

import { BehaviorSubject } from 'rxjs';
import { map, filter } from 'rxjs/operators';

Create a new behavior subject in your service function and initialize it with an initial value. For example:

const subject = new BehaviorSubject(initialValue);

Use the behavior subject to track the current value and any changes to that value. For example, you can use the .next() method to update the value of the subject, and the .getValue() method to get the current value. Copy code subject.next(newValue); const currentValue = subject.getValue(); Use the behavior subject as an observable to create streams of data and apply transformations to those streams using observable operators. For example:

const stream = subject.pipe(
  filter(value => value > 10),
  map(value => value * 2)
);

By using a behavior subject in a service function, you can track the current value and any changes to that value, and use those values to create streams of data that can be transformed and used in your application.

enter code here