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;
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;
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;
Latest comments (0)