Posted on 2012-10-09

Making clouds move

I made a new website for myself.
It's something I've been meaning to do for a while.
It will be nice to have a dedicated repository for my thoughts on web design... and everything else.


Clouds: fun to play with

For my inaugural post, I thought I'd talk about clouds. Specifically, the animated clouds you may have noticed scrolling in the background. I do a lot of work for a lot of people, but I don't get many opportunities to implement animated clouds.

I don't get many opportunities to implement animated anything.
And that's a shame.
Because movement is fun.

So I decided when building this website for myself that I wanted to make something move.

And then I had an idea.
I thought: what happens when you change the background position of a background image that's set to repeat?
I hoped it would scroll infinitely.
And it turns out that's exactly what it does.

The relevant code is below, and turns out to be an extremely easy way to do background animation.

In my next post I think I'll talk about the incredible icon font sets available from icomoon, and why you should be using them for your icon needs.

Because playing with icon font sets was the second funnest thing I did while making this site.