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 Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

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

Okay