Demo

A tale of a CSS3 Animation Demo

Once upon a time, there was this good hearted web developer, who was everyday worried about learning new cool things and trying new crazy stuff his browser could barely be able to do. Also, there were some giants, working hard to increase the power of the magic web, allowing all the peoples to live, code, learn and share freely.

Among those things, there was CSS3 with its new features! I heard about something called Mozilla Dev Derby, and by that month, the focused feature was exactly CSS3 animations! What an opportunity to learn cool and be part of something like that! It’s awesome that companies like Mozilla are working so hard to keep these subjects and contents available to us!

Two examples will be used here to both explain the technologies and tell the history. Felipe prepared a demo using HTML5 and CSS3 animations to do a Earth planet spinning, and, not aware of that, Deivid Marques had a similar idea.

Why a planet Earth?

Inspiration was the key. Since I was a child I have been fascinated with the Universe (both the micro, and macro ones) and the Earth, being what it is for us…such a good host! I decided to use it as inspiration!

Images

Obviously, images would be required. I tried to avoid images as much as possible, but I simply wouldn’t represent the Earth in a blurred image! Also, the moon, the stars in the background and the small sun are images.

What should be animating?

Before animating things around there, I mapped everything that could make sense to be moving, and how. First of all, the planet itself! The earth has to spin in one direction, while also bents to create the four seasons. Also, there is the day and night of the Earth due to its rotation.

The Moon runs around the globe, but once it is behind the Earth, it should get darker. Also, the Moon should come to the front of the planet, and then hide behind it. Also, a slow movement, added to the stars in the background, could be of use!

HTML Structure

I didn’t want to make it too complex, so I didn’t use pseudo elements. That forced me to have the HTML just a little bit bigger.

This is what is inside the Body tag:

<div id="sun">
</div>
<div id="atmosphere">
</div>
<div id='globe'>
</div>
<div id='moon'>
</div>
<div id="sunLight1">
</div>
<div id="sunLight2">
</div>
<div id="sunLight3">
</div>
<div id="sunLight4">
</div>
<div id="sunLight5">
</div>
<div id="sunLight6">
</div>

Visual effects

Well, you know that everything seems pretty from out there! So the visual effects should be cool too!

The globe

The globe is basically a rounded div, with a global map as its background. It is centered with an absolute position and sizes, and uses a box-shadow effect to represent the side of the planet where it’s night.

#globe
{
    background-image: url(images/globe-hearth.jpg) repeat-x;
    border: solid 1px #000;
    position:absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-left: -300px; /* aligning it to the center */
    margin-top: -300px;
    border-radius: 50%; /* making it round */
    z-index:0;
    box-shadow: inset 2px 2px 10px #000, inset -140px -70px 100px #000;
}

The atmosphere

The atmosphere is another round div with a box-shadow effect.

#atmosphere
{
    position:absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-left: -300px;
    margin-top: -300px;
    border-radius: 50%;
    opacity: 0.7;
    box-shadow: -6px -6px 20px #eef;
}

The Sun

The Sun, in this demo is just another div with an image as background, although, there is a tricky detail here! I wanted the Sun to be positioned right in the horizon of the globe, so, just centering it would not work! Also, I couldn’t know the resolution to fit it exactly there! But, I knew the size of the planet and I also knew it was centered!

Therefore, I just had to center it, and then adjust its position by changing its margin values.

#sun
{
    background-image: url(images/sun.png);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 47px;
    margin-left: -320px;
    margin-top: -110px;
}

The stars behind

The stars were simply a div with a repeatable background image.

The Moon

The Moon was quite more complex. It had to turn around the globe, so, I’d have to play with its z-index as well. Besides that, it was simply another round div.

Sun lights

Also, there are a few reflections of the light of the Sun. Those, are other round divs, absolutely positioned with different colours and opacity. Box-shadow could also be an optional nice touch! So I also used it.

Animation time

To animate the Earth, I created two animations using the keyframes CSS3 feature.

(Note: In these examples, I’m just showing the “-moz” definition of the animations, but you have to create them for each vendor if you want it to work in different browsers).

@-moz-keyframes dayByDay
{
    from{
            background-position: -1600px;
    }
    to{
            background-position: 0px;
    }
}

This way, the background of the globe would be passing, as pretending the globe was spinning. Also, I created the animation for the seasons:

@-moz-keyframes seasons
{
    from{
        -moz-transform: rotate(6deg);
    }
    to{
        -moz-transform: rotate(16deg);
    }
}

You know, the planet Earth is not fully straight to the 0 degrees. Now, I had to add those animations to the globe:

#globe{
    -moz-animation: dayByDay 24s linear 0s infinite, seasons 2688s linear alternate 0s infinite;
}

Animating the sky behind everything followed the very same technique as the dayByDay animation.

Animating the Moon was more of a challenge! To animate it, I had to change its size and position. Also making it darker or lighter and taking care of its z-index.

Below, is how I did that back then (on june 2011). Nowadays, I would try it with -moz-transform using the scale transform, instead of changing its width and height. Also, back then, I used negative and positive values for the z-index of the moon…instead, I could have added a z-index to the Earth, like 2, and use only positive values in the Moon’s z-index(1, and 3) to move it to the back or front of the planet. I didn’t want to change it here, because this is how it is running on the uploaded demo, in Mozilla Derby.

@-moz-keyframes moon
{
   0%{
       width: 30px;
       height: 31px;
       margin-left: -310px;
       margin-top: -40px;
       z-index:-1;
   }
   10%{
       margin-left: -450px;
       margin-top: -50px;
       width: 60px;
       height: 61px;
       z-index:1;
   }
   20%{
       margin-left: -500px;
       margin-top: -50px;
       width: 80px;
       height: 81px;
       z-index:1;
   }
   30%{
       margin-left: -450px;
       margin-top: -50px;
       width: 90px;
       height: 92px;
       z-index:1;
   }
   50%{
       margin-left: 0px;
       margin-top: -50px;
       width: 120px;
       height: 122px;
       z-index:1;
   }
   60%{
       margin-left: 300px;
       margin-top: -50px;
       width: 120px;
       height: 122px;
       z-index:1;
   }
   60%{
       margin-left: 410px;
       margin-top: -50px;
       width: 90px;
       height: 92px;
       z-index:1;
       box-shadow: inset 0px 0px 80px #000;
   }
   70%{
       margin-left: 460px;
       margin-top: -50px;
       width: 80px;
       height: 82px;
       z-index:1;
       box-shadow: inset 0px 0px 80px #000;
   }
   80%{
       margin-left: 420px;
       margin-top: -50px;
       width: 60px;
       height: 61px;
       z-index:-1;
       box-shadow: inset 0px 0px 80px #000;
   }
   90%{
       margin-left: 0px;
       margin-top: -50px;
       width: 30px;
       height: 31px;
       z-index:-1;
   }
   100%{
       width: 30px;
       height: 31px;
       margin-left: -310px;
       margin-top: -40px;
       z-index:-1;
   }
}

Mozilla Dev Derby

The above demo can be found as CSS3 up and running! in Mozilla’s Demo Studio.

Some time later, Deivid Marques did his Planeta Terra demo, using only one DIV. While studying CSS3, the idea of creating a planet Earth also came to his mind. He noticed the example in a flash tutorial and thought of creating that with CSS3 instead.

His planet Earth is made of a single div and uses the CSS to animate the background image. So, it is simpler to reproduce and understand.

The div has the following CSS applied to it:

.earth{
    background: url(images/terra.jpg) repeat-x 0 0;
    border: 1px solid rgba(26,18,101,0.3);
    border-radius: 225px;
    box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
    height: 450px;
    left: 50%;
    margin: -225px 0 0 -225px;
    position: absolute;
    top: 50%;
    width: 450px;
    animation: loop 80s linear infinite;
}

And here is his animation definition in CSS3:

@keyframes loop {
    0% { background-position: 0 0; }
    100%{ background-position: -900px 0;}
}

His demo was also posted to Mozilla Dev Derby once he was also inspired to tell the world about he had learnt while developing this demo! Planeta Terra is also available on GitHub.

This is how we both met and were invited to write this article.

Conclusion

It was great for me to learn new things, face new challenges, talk to a lot of people about their experiences with it, and …well, lots and lots of gains, no losses!

I hope it has motivated you somehow, to create your own demo, submit it…the least you get, is a lot of fun! 🙂

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

On Sencha’s Fastbook “HTML5 Tech demo”

You might have seen the big splash Sencha landed today with their Fastbook HTML5 demo showing that using HTML5, CSS and JavaScript you can make a damn responsive version of Facebook. You can see the demo on Vimeo:

All the details are in their post “The Making of Fastbook – an HTML5 love story“. I saw this and went “holy crap, that is awesome”. As an Android user I’ve seen the native app crash several times when trying to scroll through a lot of data (also on Twitter, so this might be a Samsung implementation problem) and the HTML5 demo is incredibly smooth and compelling.

And then of course, the developer in me thought that something must be amiss about this – it is too smooth, it is too “sales demo”. And of course I got backup – the comments on the blog bring up that this is not running in a web view where a lot of the performance issues would come up and Mozilla internal mails already complained about the fact that the demo does not support any other browsers than webkit – no Firefox, no Opera and no Windows at all. To the internets! Someone is wrong about calling something HTML5 without supporting everything.

And then I stopped. And reflected. And thought for a second what we are doing here. There seems to be this massive Pavlovian response in engineers to want to find the flaws in something rather than looking at the benefits.

pavlovs dogs
Cartoon of awesome by The Rut

Yes, this only works on Webkit, which is bad as HTML5 is more than Webkit. It was also wrong of Sencha to claim that this is showing love to HTML5 without embracing the nature of HTML5 as browser-agnostic platform. But this is marketing war. This is making a demo and showing that things can work when you put effort into it. This is a direct response to the in 99% of the cases misquoted Zuckerberg statement that HTML5 wasn’t the right choice for Facebook at the time. But still I vented my disappointment:

Disappointed that @Sencha’s HTML5 love story means webkit love story. No, Firefox Mobile, no Firefox OS, no Opera and no Windows. :(((

Of course the Twitter stream from that consisted of people telling Sencha off and many people who want to see HTML5 fail (although it wouldn’t make any difference to their lives) harping on about the awful state of HTML5 and the bane of browser inconsistencies – another Pavlovian response every time you say HTML5.

Here comes the kicker, though. Quite a few of Sencha’s folks agreed and explained that this was a quick tech demo and thus only worked in Webkit. Jared Nicholls, their Senior Software architect kept it succinct:

@codepo8 agreed and fixable. Only 24 hours in a day.

So instead of waving my finger and complaining about the thing that could have been but wasn’t thought of I am trying to get conversations going to fix and enhance. Let’s see where this goes.

Sometimes the right thing to do is not to listen to the angry man inside your head and see how something can be done better. Sencha’s demo is a damn good marketing move and well done indeed. So instead of shooting it down it makes sense to work together.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)