Infinitly looping image sequence inside a div that changes on scroll
Budget: £10 – £20 GBP
I would someone to create some javascript/css/html code for me.
What I would like:
- A single image in the middle of the page
- The image is one of a series of different animation frames
- When the user clicks and drags inside the image, scrolls left or right over the image with the touchpad, swipes left or right over the image on touchscreen or uses the mouse scrool wheel over the image the image switches to the next in the series.
- I would like the ability to change how fast the animation frames change, so swiping might move just 1 frame, or will animate through 5 or 6 frames.
- I would like the ability to add or remove momentum or inertia, so if the user swipes quickly it will scroll through a few frames before slowing down again.
- The frames need to loop, so that once the user has scrolled to the left image it seamlessly starts at the begining again.
- Needs to work on mobile and desktop
What I would like:
- A single image in the middle of the page
- The image is one of a series of different animation frames
- When the user clicks and drags inside the image, scrolls left or right over the image with the touchpad, swipes left or right over the image on touchscreen or uses the mouse scrool wheel over the image the image switches to the next in the series.
- I would like the ability to change how fast the animation frames change, so swiping might move just 1 frame, or will animate through 5 or 6 frames.
- I would like the ability to add or remove momentum or inertia, so if the user swipes quickly it will scroll through a few frames before slowing down again.
- The frames need to loop, so that once the user has scrolled to the left image it seamlessly starts at the begining again.
- Needs to work on mobile and desktop