This site was created by Sarah Heimlich, Steph McArthur and Sandy Phan
-All information in this site were extracted from Web Animation Specs
. -Web Animations Tutorial
-
-
-
-
-
-
- This site was created by Sarah Heimlich, Steph McArthur and Sandy Phan
-All information in this site were extracted from Web Animation Specs
. -This site was created by Sarah Heimlich, Steph McArthur and Sandy Phan
+All information in this site were extracted from Web Animation Specs
. +new Animation(document.querySelector("#a"), {left: "300px"}, 2);
'new Animation()' creates a new animation object.'document.querySelector("#a")' is a DOM method which
+ 'document.querySelector("#a")' is a DOM method which
gets the element with id equals to 'a' from the HTML file. You
can always use 'document.getElementById("a")' which
would result the same thing. Since we have defined its class
name as well, we can also select it using
- 'document.querySelector(".test")'.'document.querySelector(".test")'.
+
'{left: "300px"}' is the effects of the animation.
- In this case we are letting it move to 300px from left.'2' will set the duration of the animation to
- 2 seconds. The bigger the number, the slower the animation
- speed and vice versa.Web animations is to have a flash or GIF - animation intergrated onto the web page. Normal web animations - still require the use of plugins such as Java Applets, Shockwave, - Adobe Flash. In this tutorial, we will be showing you how to - create animations using javascript without the need of - installing plugins.
+ animation intergrated onto the web page. Normal web animations + still require the use of plugins such as Java Applets, Shockwave, + Adobe Flash. In this tutorial, we will be showing you how to + create animations using javascript without the need of + installing plugins.To create animations on objects such - as moving left, right, up, down, change colours, etc, use - the following interface:
+ as moving left, right, up, down, change colours, etc, use + the following interface:new Animation(element,
- {effect(s)}, {optional: timed items});
+ {effect(s)}, {optional: timed items});
'new Animation' creates an animation object, - 'element' is the DOM object or animation target that we want to - animate and it is a compulsory component and can be nullable. - For instance, 'element' can be a 'div' with, a 'p' (paragraph).
-'effects' defines the types of effects - in animation such as move left, or right, or change colours, or - change opacity, etc. 'effects' is also a compulsory component as - well as nullable. This parameter can be of AnimationEffect object - or CustomAnimationEffect object. These effects will be shared with - any other animation objects referring to the same AnimationEffect - or CustomAnimationEffect object. In the case this component being - null, the animation will have a null effect.
'new Animation' creates an animation object, + 'element' is the DOM object or animation target that we want to + animate and it is a compulsory component and can be nullable. + For instance, 'element' can be a 'div' with, a 'p' (paragraph).
+'effects' defines the types of effects + in animation such as move left, or right, or change colours, or + change opacity, etc. 'effects' is also a compulsory component as + well as nullable. This parameter can be of AnimationEffect object + or CustomAnimationEffect object. These effects will be shared with + any other animation objects referring to the same AnimationEffect + or CustomAnimationEffect object. In the case this component being + null, the animation will have a null effect.
+'timed items' can be of type double or - timing dictionary and is nullable and optional component. When - this parameter is double, then it specifies the duartion of a - single iteration of the animation. If it is null, then the default - value for iteration duration would be zero is specified in the - Timing Dictionary.
This site has the following tutorials:
+This site has the following tutorials:
- - -