https://github.com/kimfucious/canvas-image-slider
https://github.com/kimfucious/canvas-image-slider
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kimfucious/canvas-image-slider
- Owner: kimfucious
- Created: 2023-01-27T09:35:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-06T03:08:50.000Z (over 2 years ago)
- Last Synced: 2025-01-15T00:00:53.583Z (4 months ago)
- Language: TypeScript
- Size: 1.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Canvas Image Slider
This is an example of how to create an HTML 5 Canvas API based image slider
## To Run Locally
1. clone `https://github.com/kimfucious/canvas-image-slider.git` to a directory of your choosing
2. navigate into that directory
3. execute `npm i`
4. execute `npm start`
## References
- [Optimizing Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)
- [Preloading Images](https://rembound.com/articles/how-to-load-and-draw-images-with-html5-canvas)
- [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
- [Animating with javascript](https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/)
- [Using requestAnimationFrame with React Hooks](https://css-tricks.com/using-requestanimationframe-with-react-hooks/)