hay un ejemplo de una maqueta de desplazamiento aquí . Necesito hacerlo en react js, así que lo convertí en react js pero funciona en el primer desplazamiento y luego se detiene en 0000.jpg
Uso este enlace para encontrar un ejemplo de una maqueta de desplazamiento implementada por puro Js
lienzo.js
import React, { useEffect, useRef } from "react"; const Canvas = (props) => { const { draw, ...rest } = props; const canvasRef = useRef(null); useEffect(() => { const html = document.documentElement; const canvas = canvasRef.current; const context = canvas.getContext("2d"); let frameCount = 0; let animationFrameId; const currentFrame = (index) => { console.log("++++++++++", index); return `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index .toString() .padStart(4, "0")}.jpg`; }; // Set canvas dimensions canvas.width = 1158; canvas.height = 770; // Create, load and draw the image const img = new Image(); img.src = currentFrame(1); // we'll make this dynamic in the next step, for now we'll just load image 1 of our sequence img.onload = function () { context.drawImage(img, 0, 0); }; const updateImage = (index) => { console.log("updateImage", index); img.src = currentFrame(index); context.drawImage(img, 0, 0); }; window.addEventListener("scroll", () => { console.log("scroll"); const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = scrollTop / maxScrollTop; const frameIndex = Math.min( frameCount - 1, Math.ceil(scrollFraction * frameCount) ); requestAnimationFrame(() => updateImage(frameIndex + 1)); }); }, []); return <canvas ref={canvasRef} {...rest} />; }; export default Canvas;Aplicación.js
import "./styles.css"; import Canvas from "./Canvas"; export default function App() { return ( <div className="App"> <Canvas /> </div> ); }