Lord_TCG#9068 Posts - Answer Overflow

Lord_TCG#9068

Explore posts from servers

DIAdiscord.js - Imagine an app KPCKevin Powell - Community

Posts Comments

KPCKevin Powell - Community

•Created by Lord_TCG#9068 on 10/5/2024 in #front-end

How Supported Is Supported Enough?

29 replies

KPCKevin Powell - Community

•Created by Lord_TCG#9068 on 5/16/2024 in #os-and-tools

PM2 timestamps for error logs?

Anyone here use PM2 a lot? pm2 start "npm run start" --name "appName" --time gives me time stamps in the appName-out.log file... but not in the appName-error.log file... What am I missing?

1 replies

KPCKevin Powell - Community

•Created by Lord_TCG#9068 on 1/23/2024 in #front-end

Help Replicating This

As a tool to learn new techniques, I'm recreating things I find on the web. Today I'm trying to do the mouseover image effect seen on this website (while in desktop screen sizes) https://en.bazil.fr/ I managed to get close with this react hook...

import { useEffect, useRef } from "react";

export default function useMouseMove() {
  const imageRef = useRef();
  const yCap = 1;
  const xCap = 3;

  useEffect(() => {
    const handleMouseMove = (event) => {
      const { clientX, clientY } = event;
      const centerX = window.innerWidth / 2;
      const centerY = window.innerHeight / 2;

      let posX = ((clientX - centerX) / centerX) * 100; // as a percentage of half the viewport width
      let posY = ((clientY - centerY) / centerY) * 100; // as a percentage of half the viewport height

      // Calculate the distance of the mouse from the center of the viewport
      const distance = Math.sqrt(
        Math.pow(clientX - centerX, 2) + Math.pow(clientY - centerY, 2)
      );

      // Use the distance to calculate the scaling factor
      const scaleFactor = Math.pow(distance, 2);

      posX *= scaleFactor;
      posY *= scaleFactor;

      const cappedPosX = Math.min(Math.max(posX, xCap * -1), xCap);
      const cappedPosY = Math.min(Math.max(posY, yCap * -1), yCap);

      imageRef.current.style.transform = `translate(${cappedPosX}vw, ${cappedPosY}vh)`;
    };

    window.addEventListener("mousemove", handleMouseMove);

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

  return imageRef;
}

import { useEffect, useRef } from "react";

export default function useMouseMove() {
  const imageRef = useRef();
  const yCap = 1;
  const xCap = 3;

  useEffect(() => {
    const handleMouseMove = (event) => {
      const { clientX, clientY } = event;
      const centerX = window.innerWidth / 2;
      const centerY = window.innerHeight / 2;

      let posX = ((clientX - centerX) / centerX) * 100; // as a percentage of half the viewport width
      let posY = ((clientY - centerY) / centerY) * 100; // as a percentage of half the viewport height

      // Calculate the distance of the mouse from the center of the viewport
      const distance = Math.sqrt(
        Math.pow(clientX - centerX, 2) + Math.pow(clientY - centerY, 2)
      );

      // Use the distance to calculate the scaling factor
      const scaleFactor = Math.pow(distance, 2);

      posX *= scaleFactor;
      posY *= scaleFactor;

      const cappedPosX = Math.min(Math.max(posX, xCap * -1), xCap);
      const cappedPosY = Math.min(Math.max(posY, yCap * -1), yCap);

      imageRef.current.style.transform = `translate(${cappedPosX}vw, ${cappedPosY}vh)`;
    };

    window.addEventListener("mousemove", handleMouseMove);

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

  return imageRef;
}

... I noticed in dev tools that his image translated up to 3vw and 1vh respectively... but his is buttery smooth, and almost elasticated. The further the mouse moves away from the origin the less the image moves. Mine just stops at the movement cap... I made a sandbox Any advice in getting this to work would be amazing. Thanks!

2 replies

KPCKevin Powell - Community

•Created by Lord_TCG#9068 on 1/22/2024 in #front-end

Curious Coverage Question

I'm curious. What % coverage do you look on caniuse.com before you consider something to be production ready?

7 replies

Gaming

Programming