Image Animation when Scrolling

maurerkrisztian

Krisztián Maurer

Posted on July 22, 2022

Image Animation when Scrolling

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
💖 💪 🙅 🚩
maurerkrisztian
Krisztián Maurer

Posted on July 22, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Image Animation when Scrolling
javascript Image Animation when Scrolling

July 22, 2022