Test: Css Animation Masks

Slanted

Boxed

Objective

To show masked animations.

Description

The upper animation (named "Slanted") should show two numbers (1 and 2) with a line in between them, going horizontally to the right from the upper left corner above the 1, then in a 45 degree angle down in between the numbers, and once beneath the 2, horizontally to the lower right corner. The lower animation (named "Boxed") should show a red number 3 with a thick border. Both the slanted line in the upper animation and the border in the lower animation should show the same moving image. The upper animation should show the moving image quite clearly, while the lower animation should show a rather cloudy rendering of the same image.

Used technology

HTML, CSS, Ecmascript (Javascript), 1-bits transparancy, 24-bits (alpha) transparancy.

Possible use

Progress bars, logos, eye-catchers, buttons, etc.

Advantages

• Any shape possible;
• Probably smaller file-sizes than gif animation;
• Works in any graphics, css and dom-capable browser.

Disadvantages

• No animation without dom-capability;
• May become annoying when used too much;
• MSIE6 doesn't natively support 24-bit transparancy.

CSS coding

img {
border: 0 solid;
background: url(1-2.jpg);
background-position: 0 0;
}

Ecmascript coding

theYCoord++;
if (theYCoord == 300) { theYCoord = 0 }
theImg["backgroundPosition"] = "0px " + theYCoord + "px";