Day 33 – Fireflies

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.
grave_firefliesThe 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.
path

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.
firefliesThis 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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s