HTML Animation

Sam1 · July 15, 2008, 2:52am

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

waltd · July 15, 2008, 4:04am

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: <Prototype API Documentation | Element (Deprecated URL)
setStyle> and delay here: <Prototype API Documentation | Function (Deprecated URL)
delay>

Walter

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

Sam1 · July 15, 2008, 11:14am

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

Sam1 · July 15, 2008, 11:17am

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

waltd · July 15, 2008, 2:46pm

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

Sam1 · July 15, 2008, 5:07pm

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… 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

waltd · July 15, 2008, 9:54pm

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

Sam1 · July 15, 2008, 10:32pm

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

Sam1 · July 16, 2008, 4:47pm

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

waltd · July 16, 2008, 5:32pm

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

waltd · July 16, 2008, 5:35pm

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

Sam1 · July 16, 2008, 6:16pm

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

waltd · July 16, 2008, 6:46pm

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

Sam1 · July 16, 2008, 7:05pm

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