Short update, but I added falling leaves animation to this blog’s homepage! Somehow, it’s relaxing to just stare endlessly at it.

I drew the leaf myself! Doesn’t it look really cute?

I also added a link to the Github source for this blog! Just in case.

Technical details

The leaves are added in the homepage file /layouts/index. The extra css is added to /static/css/homepage.css. The animation is written in javascript in the file /static/css/moving-leaves.js.

As a typical frontend framework (React/Vue) junkie, this is one of the rare times which I use JQuery, but it really is quite straightforward! It’s also pretty cool that I could use async functions in JQuery callbacks without too much hassle. Async functions are the future of Javascript after all hehe.

In order to make the leaves move, I used an async function move_leaf with an infinite loop which sleeps for 500ms each iteration. I then used JQuery to get the position of the leaf, and add a small amount to it to make it move a little every 500ms.

An interesting thing I did was to increment the positions of the leaves by a random number using Math.random(). This helped to make the movement of the leaves feel more natural, compared to them simply moving in a straight line.