Canvas-based scroll-driven image sequence animation
npm install scroll-image-sequenceCanvas-based scroll-driven image sequence animation.
js
import { initScrollImageSequence } from 'scroll-image-sequence';initScrollImageSequence({
canvas: document.querySelector('#hero'),
frameCount: 100,
imagePath: (i) =>
/imgs/FIG_${String(i).padStart(4, '0')}.jpg,
});
`API
`ts
initScrollImageSequence(options: InitScrollImageSequenceOptions): void
``ts
interface InitScrollImageSequenceOptions {
canvas: HTMLCanvasElement;
frameCount: number;
imagePath: (index: number) => string;
scrollArea?: number; // px, default = window.innerHeight * 2
resize?: boolean; // default = true
onLoaded?: () => void;
onFrame?: (frameIndex: number) => void;
}
`Notes
- This library is framework-agnostic and only touches the provided canvas.
- For demos, ensure your server can serve ES modules from dist/`.