0
137
ViewsCreando el efecto Parallax usando setState
Actualmente, lo que estoy tratando de lograr es esto, donde 1 imagen se mueve de izquierda a derecha a medida que el usuario se desplaza hacia abajo creando un efecto de paralaje:
Normalmente con DOM usaría:
let image = document.getElementById("image"); window.addEventListener('scroll', function() { let value = window.scrollY; image.style.marginRight = value * 4 + 'px'; image.style.marginTop = value * 1.5 + 'px'; }Pero actualmente estoy tratando de replicar este efecto en React usando setState, pero la imagen no se mueve junto con la rueda de desplazamiento del mouse y el diseño no parece correcto. Hasta ahora, he creado el efecto para cuando mi desplazamiento tiene una altura de entre 1 y 300 px, donde mi imagen se mueve del centro al lado izquierdo. Pero quiero que después de 300px hasta 600px, la imagen se mueva de izquierda a derecha como se ve en la imagen de referencia.
CodeSandBox: https://codesandbox.io/s/modest-hill-2wuko
Código actual:
const [leftScroll, setLeftScroll] = useState(false); const [topScroll, setTopScroll] = useState(false); const [textScroll, setTextScroll] = useState(false); useEffect(function onFirstMount() { const changeBackground = () => { let value = window.scrollY; console.log(window.scrollY); if (value > 0 && value < 300) { setLeftScroll(true); setTopScroll(true); setTextScroll(true); } else { setLeftScroll(false); setTopScroll(false); setTextScroll(false); } }; window.addEventListener("scroll", changeBackground); return null; }, []); return ( <div className="background"> <div style={{ backgroundColor: "#0E2043", padding: "50px", height: "1000px", display: "flex", justifyContent: "center" }} > <div className="header">Vanuatu</div> <img className="image" style={{ marginRight: leftScroll ? "300px" : "0px", transition: "2s", marginTop: topScroll ? "300px" : "0px" }} alt="random" src="https://cdn.britannica.com/87/122087-050-1C269E8D/Cover-passport.jpg" /> <div className="text" style={{ marginTop: textScroll ? "300px" : "800px", transition: "4s", marginLeft: "120px" }} > Minimum Investment </div> </div> </div>1 answers
Answer question0
Como Andy mencionó en los comentarios, no desea usar useState para animaciones como esta. Si ya tiene el código para esta función sin React, también puede usarlo principalmente en su código React. Excepto que desea usar useRef para crear una referencia a los elementos que desea animar.
Además, no olvide limpiar su detector de eventos después de que se desmonte el componente.
const imageRef = useRef(); const textRef = useRef(); useEffect(function onFirstMount() { const changeBackground = () => { let value = window.scrollY; if (value > 0 && value < 300) { textRef.current.style.marginTop = "300px"; imageRef.current.style.marginRight = "300px"; imageRef.current.style.marginTop = "300px"; } else { textRef.current.style.marginTop = "800px"; imageRef.current.style.marginRight = "0px"; imageRef.current.style.marginTop = "0px"; } }; window.addEventListener("scroll", changeBackground); return () => window.removeEventListener("scroll", changeBackground); }, []); return ( <div className="background"> <div style={{ backgroundColor: "#0E2043", padding: "50px", height: "1000px", display: "flex", justifyContent: "center" }} > <div className="header">Vanuatu</div> <img ref={imageRef} className="image" style={{ transition: "2s" }} alt="random" src="https://cdn.britannica.com/87/122087-050-1C269E8D/Cover-passport.jpg" /> <div ref={textRef} className="text" style={{ transition: "4s", marginLeft: "120px" }} > Minimum Investment </div> </div> </div>