 | |
| 2.2 | Slanted Oval |
| |
| 2.2 | Slanted Oval |
This function is basically the same as the circle, but I have rotated the whole thing at 45 degrees. A similar technique could be devised for the other shapes, but they probably wouldn't be as usefull as this one.
function slanted() {
SlaLayername = "layer1"; // name of the layer you want to move
SlaRadius = 100; // radius of circle in pixels
SlaMultiplier = 0.5; // oval muliplier, <1 makes thinner, >1 makes fatter
SlaAnglestart = 0; // starting angle (0 is the right edge of the circle, 90 is at the top and so on)
SlaAngleinc = 5; // angle incremenation, a larger number makes it go faster
SlaDirection = 1; // "1" is counter-clockwise, "-1" is clockwise
SlantDir = 1; // "1" means on 45 degrees, "2" means on -45 degrees
SlaSpeed = 30; // repetition speed in milliseconds
SlaAngle = SlaAnglestart;
var u = SlaRadius*Math.cos(SlaAngle*Math.PI/180)*Math.SQRT1_2;
var v = SlaMultiplier*SlaRadius*Math.sin(SlaAngle*Math.PI/180)*Math.SQRT1_2;
if (SlantDir == 1) {
SlaLeft = document.layers[SlaLayername].left - (u-v);
SlaTop = document.layers[SlaLayername].top + (u+v);
}
if (SlantDir == 2) {
SlaLeft = document.layers[SlaLayername].left - (u+v);
SlaTop = document.layers[SlaLayername].top + (-u+v);
}
slideslanted();
}
function slideslanted() {
SlaAngle += SlaDirection*SlaAngleinc;
var u = SlaRadius*Math.cos(SlaAngle*Math.PI/180)*Math.SQRT1_2;
var v = SlaMultiplier*SlaRadius*Math.sin(SlaAngle*Math.PI/180)*Math.SQRT1_2;
if (SlantDir == 1) {
var x = SlaLeft + (u-v);
var y = SlaTop - (u+v);
}
if (SlantDir == 2) {
var x = SlaLeft + (u+v);
var y = SlaTop - (-u+v);
}
document.layers[SlaLayername].moveTo(x,y);
setTimeout("slideslanted()",SlaSpeed);
}
| ||
| 1.1 Introduction
1.2 Overlapping 1.3 Nesting 1.4 Using JavaScript |
2.1 Sliding Layers
2.2 Pre-Built Functions 2.3 Clipping Layers 2.4 Looping Animations 2.5 Changing Images |
3.1 Mouse-Click Animation
3.2 Capturing Keystrokes 3.3 Drag and Drop 4.1 Making Demos 4.4 Problems 4.5 Screen Sizes |
| ||