DEV Community

Saba beigi
Saba beigi

Posted on

3 1

change Mouse color with scroll with javascript

in last post we made a custom mouse, in this mouse we wanna change that mouse color when we scroll our mouse.
first we should listen to our mouse to find out when the scroll is done, then we choose a color from our color list:

import React, { createContext, useState } from "react";

export const CursorContext = createContext();

const CursorContextProvider = (props) => {
  const [cursor, setCursor] = useState({ active: false });

  return (
    <CursorContext.Provider value={[cursor, setCursor]}>
      {props.children}
    </CursorContext.Provider>
  );
};

export default CursorContextProvider;
Enter fullscreen mode Exit fullscreen mode
import React from "react";
import useMousePosition from "./useMousePosition";
const Cursor = ({ color, color1, scroll}) => {
  const { clientX, clientY } = useMousePosition();

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 9999,
        pointerEvents: "none",
      }}
    >
      <svg
        width={500}
        height={500}
        viewBox="0 0 50 50"
        xmlns="http://www.w3.org/2000/svg"
        style={{
          position: "absolute",
          left:  clientX ,
          top:  clientY ,
          color: color,
        }}
      >
        <defs>
          <linearGradient id="myGradient" gradientTransform="rotate(90)">
            <stop offset="5%" stopColor={color} />
            <stop offset="95%" stopColor={color1} />
          </linearGradient>
        </defs>

        <circle
          cx="25"
          cy="25"
          r="7.5"
          fill={!scroll ? "url('#myGradient')" : color1}
          id="cursor"
        />
      </svg>
    </div>
  );
};
export default Cursor;

Enter fullscreen mode Exit fullscreen mode
import { MouseContext } from "./context/mouse-context";
import { useContext, useEffect, useState } from "react";
import CursorContextProvider from "./context/CursorContextProvider";
import Cursor from "./hooks/Cursor";
import useMousePosition from "./hooks/useMousePosition";
import SleepMode from "./component/SleepMode/SleepMode";

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);

function App(props) {
  const { cursorType, cursorChangeHandler } = useContext(MouseContext);
  const [color, setColor] = useState([
    "#000000",
    "#3C6487",
    "#9682B4",
    "#A06E8C",
    "#A01E64",
    "#CD5078",
    "#D78CAA",
    "#6EB996",
    "#1E7850",
    "#3C6487",
    "#000000",
  ]);

  const [color1, setColor1] = useState(color[0]);
  const [color2, setColor2] = useState(color[0]);
  const [scroll, setScroll] = useState(false);
  const [scrolltop, setScrolltop] = useState("false");
  const [id, setId] = useState(0);
  const [up, setUp] = useState(0);
  const [dimensions, setDimensions] = useState({
    height: window.innerHeight,
    width: window.innerWidth,
  });
  const { clientX, clientY } = useMousePosition();


  let myTimeout = null;
  let myTimeout1 = null;
  function myStopFunction() {
    if (up >= 0) {
      if (id < color.length - 1) {
        setColor2(color[id + 1]);
        setColor1(color[id + 1]);
      } else {
        setColor2(color[color.length - 1]);
        setColor1(color[color.length - 1]);
      }
    } else {
      if (id !== 0) {
        setColor2(color[id - 1]);
        setColor1(color[id - 1]);
      } else {
        setColor2(color[0]);
        setColor1(color[0]);
      }
    }

    setScroll(true);
    setLeftnumbermax(id);
    setScrolltop("false");
  }




  useEffect(() => {
    setColor2(color[0]);
  }, []);
  useEffect(() => {
    if (leftnumber !== 0) {
      if (leftnumber % 2 !== 0) {
        if (
          leftnumber < color.length &&
          id < color.length - 1 &&
          leftnumbermax < color.length - 1
        ) {
          setId(id + 1);
          setColor1(color[id + 1]);
          setColor2(color[id + 1]);
        } else {
          if (id > 0) {
            setId(id - 1);
            setColor1(color[id - 1]);
            setColor2(color[id - 1]);
          } else {
            setId(0);
            setLeftnumbermax(0);
            setColor1(color[0]);
            setColor2(color[0]);
          }
        }
      }
    } else {
      setId(0);
      setColor1(color[0]);
      setColor2(color[0]);
    }
  }, [leftnumber]);

  window.addEventListener("wheel", (event) => {
    if (myTimeout) clearTimeout(myTimeout);
    setScroll(false);
    setLeftnumbermax(id);
    setScrolltop("true");
    const delta = Math.sign(event.deltaY);
    setUp(delta);
    if (id < color.length - 1 && delta > 0) {
      setColor1(color[id]);
      setColor2(color[id + 1]);
    } else {
      if (id === color.length - 1 && delta > 0) {
        setColor1(color[color.length - 1]);
        setColor2(color[color.length - 1]);
      } else if (id < color.length - 1 && delta < 0) {
        if (id !== 0) {
          setColor1(color[id]);
          setColor2(color[id - 1]);
        } else {
          setColor1(color[0]);
          setColor2(color[0]);
        }
      }
    }
    if (delta > 0) {
      if (id < color.length - 1) {
        setId(id + 1);
        setLeftnumbermax(id + 1);
      } else {
        setId(0);
        setLeftnumbermax(0);
      }
    } else if (delta < 0) {
      if (id > 0) {
        setId(id - 1);
        setLeftnumbermax(id - 1);
      } else {
        setId(color.length - 1);
        setLeftnumbermax(color.length - 1);
      }
    }
    myTimeout = setTimeout(myStopFunction, 1000);
  });

  return (
    <div
      className="App"
      style={{
        height: dimensions.height - 1,
        width: dimensions.width - 0.5,
        background: 
           !scroll
            ? `linear-gradient(180deg, ${color1}, ${color2})`
            : color2,
      }}
      onMouseDown={handleDown}
      onMouseUp={handleLeave}
      // onmousemove={handleMove}
    >

        <CursorContextProvider>
          <Cursor
            color={color1}
            color1={color2}
            scroll={scroll}
            left={left}
            right={right}
            drag={drag}
            pos={pos}
          />
          {props.children}
          <div
            className="Center_Circle"
            style={{
              background:
                 !scroll
                ? `linear-gradient(180deg, ${color1}, ${color2})`
                : color2,
              position: "fixed" ,
              left:  "50%",
              top: "50%",
              transform: "translate(-50%, -50%)",

            }}
          ></div>
        </CursorContextProvider>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay