On-Scroll Pixelated Image Loading Effect

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!

Thanks for checking by and let me see your creations, just hit me up on Twitter @codrops or tag us on Instagram @codropsss.