On-Scroll Pixelated Image Loading Effect

 A recreation of the on-scroll pixelated image loading effect is seen on Felicity Ingram’s website.

The website of Felicity Ingram has such a fantastic pixel-loading effect when scrolling. It’s super artsy and a bit brutalist, and it reminds me of what we once experimented with for showing the password strength in a signup 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 are 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 this is simple: Turn off image smoothing and enlarge a smaller version of the image to the canvas. This will create pixel magic.

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.