Image Animation when Scrolling

Krisztián Maurer - Jul 22 '22 - - Dev Community

Maurer Krisztián
Code: https://github.com/MaurerKrisztian/Scroll_Image_Animation

Demo: https://maurerkrisztian.github.io/Scroll_Image_Animation/

This project is about making animation with images by scrolling up and down and looping them.

I know, I know, it's not the best way to animate images, but it was a fun little project.

core code: animateImageByScroll.js

function animateImages(allImageNumber, startImageIndex, pixelChange, renderFunction)
Enter fullscreen mode Exit fullscreen mode

animateImages:

  • allImageNumber: number of all pictures
  • startImageIndex: the initial numbering of the images (now it's 10. m-10.png)
  • pixelChange: animation speed.
  • renderFunction: this function will get the actual image number and it will render to the screen
function renderImage(ImageNumber)
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player