Ahoy, front-end pirates! Welcome to the Chapter 3 of the Making of The Secret of Front-end Island saga: the Rising Smoke.
In the layout the smoke was composed by 5 gray circles at different opacity. Oh joy! I could avoid using images using markup and border-radius, and animate every smoke ball using CSS 3 only. Challenging, then funny. :)
Structure of the page
As explained in the previous post, I divided the site into many
- and so on…
The DOM path of the smoke parent element is the following:
#event > #horizon > #smoke
The smoke markup
By the layout, 5 balls of smoke are visible at the same time. To make a beautiful animation, I decided to double them. Here’s the markup for the 10 balls of smoke.
The CSS 3 only animation
The smoke animation can perfectly be developed in CSS 3 only.
I used Modernizr to test whether the browser supports CSS 3 animations or not. Modernizr adds the
cssanimations class if the browser supports animations, or the
no-cssanimations if it doesn’t.
disableAnimations class is toggled when the user presses the “disable animations” button on the page (maybe to save battery life).
So here’s the code:
Until now, the smoke container is positioned and all the smoke balls are positioned to its bottom and scaled to 20%.
And here’s where the magic happens. I created two different animations,
smokeL for the smoke balls which moved up and left, and
smokeR for the smoke balls which moved up and right.
Then I applied this two animations alternately to each smoke ball, with a total duration of 10 seconds, and a delay of 1 second more each.
And that’s it! The smoke animation works perfectly on modern browsers!
Here’s the result:
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 :)