I started this page at the html500 event. I was inspired by the fireflies in Grave of the Fireflies, an animation film by Hayao Miyazaki. If you haven’t seen it yet, I highly recommend doing so! However, be warned, this is one of the saddest films I have seen.
The film follows two children in Kobe during the final months of World War II. In one of the scenes, the children capture fireflies as a source of light in their make-shift home. To create the glowing feel of the fireflies, I used box-shadow to add different colors to the element. I made two different css animations, one for horizontal movement and one for vertical movement. Originally I set a delay and added a firefly to the screen when the user clicked. I got this effect: all the fireflies move on the same path one after another.
This was pretty but reminded me more of lights than of fireflies. By setting delays and modifying the animation times, the five fireflies look like they are moving naturally even though they are all on the same path.
This was done in all css and html! I added the variance in the width of the elements so that the fireflies would look like they were blinking. To finish off, I added a slight gradient to the background for a night sky.
Day 33 – Fireflies