CODEWITHSUNDEEP
htmlanimation
Jordi Puigdellívol
Jordi Puigdellívol

Reputation: 1748

HTML5 webpage animation

Does anybody know how to achieve something like that?

http://teamviget.com/#!lift-off

I want to do something similar but I'm something new in html5 and all this stuff

Thanks!

Upvotes: 0

Views: 463

Answers (1)

Sri
Sri

Reputation: 568

Of course you can do. First of all the you gotta draw the background image. And provide two buttons on either side. Onclick of these buttons you call a function... which inturn calls an setInterval() function that animates(here in your case the image has to fade and a new image has to be formed) . For providing fading effect we have a popular parameter. ctx.globalAlpha(). In each animation step change the value of it. Lemme provide a sample code so that you can understand it properly.

canvas = document.getElementById("canvas");  
ctx = canvas.getContext("2d");
var ms = new Image();      
ms.src = "images/asdf.jpg"
ctx.drawImage(ms,0,0);  // Will draw the initial image (assume)
ctx1 = canvas.getContext("2d");

Now let me define the onclick function.

onclick="caller()";

The caller function should be made to call the animate function

function caller()
{
   i=1;
   inter=setInterval(animate(),500); // Calls the animate function every 500 msec
}

And the animate function would look as shown below

function animate()
{
   i=i-0.1; 
   ctx1.globalAlpha=i;

   if(i=0)
   {
        clearInterval(inter);
        ctx1.drawImage(ms2,0,0);  // This will draw the next image defined in ms2.
   }
}

So the image will be faded out and a new image appears in 5 secs. Use an array if you have several images and definitely javascipts would help you to implement them all the way you want. Let me know if you need any more clarifications to a SPECIFIC problem that you are facing.

Upvotes: 2

Related Questions