On-Scroll Pixelated Image Loading Effect

From our sponsor:

Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.

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.

Source link

Show More


Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button