Blurry Loading
This one was short and simple but it looked really good at the end. The idea is that when the page loads, a blurred background image gradually becomes clear as the percentage count displayed increases from 0% to 100%.
I used the setInterval() method in JavaScript to increase the percentage count every few milliseconds and update the percentage on screen. At the same time, I reduced the blur using the CSS filter property with the blur() function so it looked like the image was slowly coming into focus.
This project didn’t take long to be honest.
For a live demo of the project, click here
To view the code on GitHub, click here
On to Day 6 🚀
Top comments (0)