The website of Felicity Ingram has such a fantastic pixel loading effect when scrolling. It’s super artsy and a bit brutalistic, and it reminds me of what we once experimented with for showing the password strength in a sign up form. It’s a great idea and quickly implemented, so I wanted to share it with you here.
So what exactly is happening? Visually, a pixelated image becomes less pixelated: the pixels become smaller and smaller until we have a sharp image. This happens when the respective image enters the viewport (or a bit later actually).
There’s lots of tutorials and scripts out there that show how to pixelate an image, there’s even a library. You can read this Stack Overflow thread (check out the comments, too, for code examples, and libraries), to understand how it works. The basic idea behind is simple: Turn off image smoothing and enlarge a smaller version of the image to the canvas. This will create the pixel magic.
This is how it looks in action:
I really hope you enjoyed this and find it interesting!
The images were generated with Midjourney, feel free to use them in your projects, too!