HTML Animation

Is there anyway to create simple animation (colours fade-in and fade-out) with pure html objects, like this GIF animation….

http://www.thebookdesign.com/ani/animation.html

I’d remain grateful. Many thanks

Sam

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

You can do this using JavaScript, the script.aculo.us effects library makes it simpler, but not exactly easy.

The Effect.Morph would make it simple to fade between two colors smoothly, for a more jumpy look, you could define a number of different styles and use a timer to govern when you would jump between them using the Prototype.js function setStyle. This latter would not require script.aculo.us at all.

Effect.Morph

Draw a colored HTML box on the page. Apply the Protaculous Action[1] to the page, and select scriptaculous-packed from the library menu. Click on either of the Function Body buttons in the Actions palette, and paste the following in there:

$('thing1').morph('background-color:#999999',{duration:3,delay:1});

Where I’ve written thing1 above, replace it with the actual name (from the Inspector) of the box you drew.

When you preview this, you’ll see your colorful box change to gray. You can change the color to something else, you can also add more elements to the style — say you wanted the box to change shape as well as color — the sky’s the limit. If you can write it in CSS, you can do it with Morph. Duration and delay are optional, and are set in seconds (decimals are okay, too).

More here: http://github.com/madrobby/scriptaculous/wikis/effect-morph

SetStyle

Draw your colored HTML box, as before. Note the name of your box. Now let’s say it was called thing2, and you wanted it to cycle from the starting color to magenta to red to yellow, in one second intervals. Paste the following into the Protaculous Function Body window in the Actions palette.

Element.setStyle.delay(1,'thing2',{backgroundColor: '#f0f'});
Element.setStyle.delay(2,'thing2',{backgroundColor: '#f00'});
Element.setStyle.delay(3,'thing2',{backgroundColor: '#ff0'});

More about setStyle here: http://www.prototypejs.org/api/element/setStyle and delay here: http://www.prototypejs.org/api/function/delay

Walter

1. http://freewaypro.com/actions/downloads

On Jul 14, 2008, at 10:52 PM, Sam wrote:

Is there anyway to create simple animation (colours fade-in and fade-out) with pure html objects, like this GIF animation….

http://www.thebookdesign.com/ani/animation.html

I’d remain grateful. Many thanks

Sam

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

Draw a colored HTML box on the page. Apply the Protaculous Action[1] to the page, and select scriptaculous-packed from the library menu. Click on either of the Function Body buttons in the Actions palette, and paste the following in there:

   $('thing1').morph('background-color:#999999',{duration:3,delay:1})=

;

Hi Walter this is perfect… I really liked smooth morphing effect… At this code it just morphs once (thing1=97gray) and then stops. Is it possible to morph it in a loop (colour1-=97colour2=97colour3=97colour1)

Thanks Sam

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

Draw a colored HTML box on the page. Apply the Protaculous Action[1] to the page, and select scriptaculous-packed from the library menu. Click on either of the Function Body buttons in the Actions palette, and paste the following in there:

$(‘thing1’).morph(‘background-color:#999999’,{duration:3,delay:1});

Hi Walter this is perfect… I really liked smooth morphing effect… At this code it just morphs once (thing1—gray) and then stops. Is it possible to morph it in a loop (colour1—colour2—colour3—colour1)

Thanks Sam

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

It should be possible. I would have to investigate making a recursive function work in this context. But sure, it’s possible.

Walter

On Jul 15, 2008, at 7:17 AM, Sam wrote:

Draw a colored HTML box on the page. Apply the Protaculous Action[1] to the page, and select scriptaculous-packed from the library menu. Click on either of the Function Body buttons in the Actions palette, and paste the following in there:

$(‘thing1’).morph(‘background-color:#999999’,{duration:3,delay:1});

Hi Walter this is perfect… I really liked smooth morphing effect… At this code it just morphs once (thing1—gray) and then stops. Is it possible to morph it in a loop (colour1—colour2—colour3—colour1)

Thanks Sam

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

Thanks Walter, Shall wait for your guidance. Sam

2008/7/15 Walter Lee Davis <email@hidden>:

It should be possible. I would have to investigate making a recursive function work in this context. But sure, it’s possible.

Walter

On Jul 15, 2008, at 7:17 AM, Sam wrote:

Draw a colored HTML box on the page. Apply the Protaculous Action[1] to the page, and select scriptaculous-packed from the library menu. Click on either of the Function Body buttons in the Actions palette, and paste the following in there:

 $('thing1').morph('background-color:#999999',{duration:3,delay:1}=

);

Hi Walter this is perfect=85 I really liked smooth morphing effect=85 At this code it just morphs once (thing1=97gray) and then stops. Is it possible to morph it in a loop (colour1=97colour2=97colour3=97colour= 1)

Thanks Sam

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

I posted a question on the Prototype-Scriptaculous list, and got the clue I needed. You make an anonymous function containing all of your effects, and you use the queue feature that all of the effects share to “chain” the effects together. Then, in the last step of this chain, you call your anonymous function again.

var myFunction = function(){
    var d= 3;
    $('thing1').morph('background-color:#00f',{
        duration:d
    });
    $('thing1').morph('background-color:#0ff',{
        queue:'end',
        duration:d
    });
    $('thing1').morph('background-color:#0f0',{
        queue:'end',
        duration:d
    });
    $('thing1').morph('background-color:#f0f',{
        queue:'end',
        duration:d
    });
    $('thing1').morph('background-color:#f00',{
        queue:'end',
        duration:d
    });
    $('thing1').morph('background-color:#ff0',{
        queue:'end',
        duration:d,
        afterFinish:myFunction
    });
}
myFunction();

It’s not important what you call this function, but notice that it is defined first, then called in the afterFinish event of the last effect. Then, after it is defined, it is called once. This will fire when the page finishes loading.

This particular rainbow is very primary/ugly/clashy. But with some care and taste, you can make some cool transitions.

Walter On Jul 15, 2008, at 10:46 AM, Walter Lee Davis wrote:

It should be possible. I would have to investigate making a recursive function work in this context. But sure, it’s possible.

Walter

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

SUPER! WALTER Many many thanks for your help and insight Will keep you updated once my site is finished… I’m sure you’ll be pleased to see that Sam

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

Hi Walter I may be going somewhere wrong… this effect doesn’t apply to ‘master page’… for that matter all pages within the master style do not read this effect. HELP!

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

Actions and Master Pages are something of a problem. Try applying it to the page in question first, and see if it works there.

Walter

On Jul 16, 2008, at 12:47 PM, Sam wrote:

Hi Walter I may be going somewhere wrong… this effect doesn’t apply to ‘master page’… for that matter all pages within the master style do not read this effect. HELP!

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

I just tried (should have done before answering!)

You can apply the Action to a master page, and its settings properly copy down to the child pages. What you may have to look for is the name of the elements that you expect it to apply to. Perhaps those are not being set as you intend. If you called your animation object item1 on one page, check to be sure it is called item1 on each page in the entire set. The effect will not work any other way.

Walter

On Jul 16, 2008, at 12:47 PM, Sam wrote:

Hi Walter I may be going somewhere wrong… this effect doesn’t apply to ‘master page’… for that matter all pages within the master style do not read this effect. HELP!

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

Hi Walter, need some more help… please Please look at the link below… many thanks

http://www.thebookdesign.com/ani/index.htm

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

Ah. A simple and classic mistake. You have named all three functions myFunction. They each fire, but the definition of the function is whatever the last invocation is.

If you name each function uniquely, this will work. So in the second instance, you would name the function myFunction2, then change the afterFinish call to myFunction2, and outside of the function block, call myFunction2().

By the way, you could wrap all of this into a single function, too, and it would run all three blocks at once.

var myFunction = function(){
    var d= 3;
    $('a1').morph('background-color:#fecccb',{
        queue: { scope: 'a1' },
        duration:d
    });

    $('a1').morph('background-color:#ccccfe',{
        queue: { position: 'end', scope: 'a1' },
        duration:d
    });

    $('a1').morph('background-color:#3398cc',{
        queue: { position: 'end', scope: 'a1' },
        duration:d,
        afterFinish:myFunction
    });

    $('b1').morph('background-color:#feccff',{
        queue: { scope: 'b1' },
        duration:d
    });

    $('b1').morph('background-color:#cccc98',{
        queue: { position: 'end', scope: 'b1' },
        duration:d
    });

    $('b1').morph('background-color:#666632',{
        queue: { position: 'end', scope: 'b1' },
        duration:d,
        afterFinish:myFunction
    });

    $('c1').morph('background-color:#cccccc',{
        queue: { scope: 'c1' },
        duration:d
    });

    $('c1').morph('background-color:#cb9998',{
        queue: { position: 'end', scope: 'c1' },
        duration:d
    });

    $('c1').morph('background-color:#ffcb99',{
        queue: { position: 'end', scope: 'c1' },
        duration:d,
        afterFinish:myFunction
    });
}

myFunction();

That way you could just call one function at the end.

Walter

On Jul 16, 2008, at 2:16 PM, Sam wrote:

Hi Walter, need some more help… please Please look at the link below… many thanks

http://www.thebookdesign.com/ani/index.htm

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote

FANTASTIC! Walter Forgive my silly mistakes… what could you expect from a designer (after all) Many thanks again Sam

2008/7/16 Walter Lee Davis <email@hidden>:

Ah. A simple and classic mistake. You have named all three functions myFunction. They each fire, but the definition of the function is whatever the last invocation is.

If you name each function uniquely, this will work. So in the second instance, you would name the function myFunction2, then change the afterFinish call to myFunction2, and outside of the function block, call myFunction2().

By the way, you could wrap all of this into a single function, too, and it would run all three blocks at once.

var myFunction = function(){
   var d= 3;
    $('a1').morph('background-color:#fecccb',{
           queue: { scope: 'a1' },
           duration:d
   });

   $('a1').morph('background-color:#ccccfe',{
           queue: { position: 'end', scope: 'a1' },
           duration:d
   });

   $('a1').morph('background-color:#3398cc',{
           queue: { position: 'end', scope: 'a1' },
           duration:d,
           afterFinish:myFunction
   });

   $('b1').morph('background-color:#feccff',{
           queue: { scope: 'b1' },
           duration:d
   });

   $('b1').morph('background-color:#cccc98',{
           queue: { position: 'end', scope: 'b1' },
           duration:d
   });

   $('b1').morph('background-color:#666632',{
           queue: { position: 'end', scope: 'b1' },
           duration:d,
           afterFinish:myFunction
   });

   $('c1').morph('background-color:#cccccc',{
           queue: { scope: 'c1' },
           duration:d
   });

   $('c1').morph('background-color:#cb9998',{
           queue: { position: 'end', scope: 'c1' },
           duration:d
   });

   $('c1').morph('background-color:#ffcb99',{
           queue: { position: 'end', scope: 'c1' },
            duration:d,
           afterFinish:myFunction
   });
}

myFunction();

That way you could just call one function at the end.

Walter

On Jul 16, 2008, at 2:16 PM, Sam wrote:

Hi Walter, need some more help… please Please look at the link below… many thanks

http://www.thebookdesign.com/ani/index.htm

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote