On-Scroll Pixelated Image Loading Effect

A recreation of the on-scroll pixelated image loading effect 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 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.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!