Ahoy, front-end pirates! Welcome to the Chapter 2 of the Making of The Secret of Front-end Island saga: the Blowing Clouds.
As I described before, in the Photoshop layout I got from the designer (Diego Sessa) I had the finished 1280 pixel wide layout, and I had the discretion of choosing animations, responsive behavior, and so on.
For the blowing clouds I decided to make a “blow left and right” effect using CSS 3 only. I also wanted the clouds to move at different speeds.
Here are the steps of what I did:
The clouds sprite
I created a new empty, transparent image and copied the 4 clouds in it. After trimming the empty pixels, I saved it as transparent png (8 bit also in this case, instead of 24 bit, to save lots of kilobytes).
Structure of the page
As explained in the previous post, I divided the site into many
- and so on…
The event section contains the From the Front logo, the The Treasure of Frontend Island splash image, the event day, time and location, and the graphic of the island with the trees, the smoke, the sea, etc.
Then, I divided again the event section in 4
Inside the treasure
div I placed:
- the clouds markup
- the splash image
- the event summary
- the event type
The clouds markup
Here’s the markup for the 4 clouds. I like to use semantic IDs and very short class names, when needed, to keep the html light.
The clouds stylesheet portion
And here’s the CSS that makes the sprite to split into pieces. As you see I use the span tag to apply the background image and the absolute position, and the classes c1, c2, c3 and c4 to offset it, size it and give it a z-index value.
Each cloud has a different z-index because some clouds are behind the splashing title, some others are in front of it.
The blowing animation
Let the wind blow! Here’s how the animation is done. As you see, it’s quite simple.
There are two types of clouds: A and B. The A type translates horizontally by only 50px, the B type translates by 100px. This makes the user to perceive some deepness of the sky.
So I wrote two keyframes definitions: cloudA and cloudB.
To make the clouds move all together, I applied the keyframes to the elements giving it the same duration: 15 seconds. The animation goes back and forth infinite times using the easing function “ease-in-out”, which makes the animation both start slow and end slow.
See the final result on 2012.fromthefront.it
If you liked this explanation, please share this post!
More to come!
Come back in the next few days to see the rest of the Making of The Treasure of Front-end Island saga!
If you liked this post, please share it :)