How to make logo animation like this in html?

Question

HTML

Good afternoon.
The designers sent a site layout based on a logo that collapses when scrolling like this. Plus, it folds into a different color logo on different pages.
https://www.youtube.com/watch?v=lElCyh5k3ps
Have you seen something like this, and where would one see such a living thing? Will it really work if it can be done. Of course, no flash.
Thanks for the advice.

Answer 1

Here, keep it fast:
an example.
Only in your case, you need to cut pictures with all geometric shapes and here:

@keyframes fon {
  0% {
    background-color: red;
  }
  30% {
    background-color: blue;
  }
  60% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

Change background-color to background with images background. Well, adjust the animation speed and rp for yourself.