Time-based Resize with Sinusoidal Rate

slideCornerby() and slideCornerTo()

Cross-Browser DHTML Animation using the CBE API by Mike Foster.

This example uses the slideCornerBy() CBE method.

Here's the CSS for the positioned elements.

.clsCBE {
  position:absolute; visibility:visible;
  margin:0; padding:0; width:100; height:100; clip:rect(0 100 100 0);
  color:#ffffff; background:#000000;
}

Here's the HTML for the positioned elements.

<div id="ele1" class="clsCBE">ele1</div>
<div id="ele2" class="clsCBE">ele2</div>
<div id="ele3" class="clsCBE">ele3</div>

Here's the javascript for this page:

var ele1, ele2, ele3;
function windowOnload() {
  ele1 = document.getElementById('ele1').cbe;
  ele1.background('#ff8888');
  ele1.sequence = new Array(
    "slideCornerBy('nw',-100,-100,1000)",
    "slideCornerBy('nw',100,100,1000)",
    "slideCornerBy('ne',100,-100,1000)",
    "slideCornerBy('ne',-100,100,1000)",
    "slideCornerBy('se',100,100,1000)",
    "slideCornerBy('se',-100,-100,1000)",
    "slideCornerBy('sw',-100,100,1000)",
    "slideCornerBy('sw',100,-100,1000)"
  );  
  ele2 = document.getElementById('ele2').cbe;
  ele2.background('#88ff88');
  ele2.sequence = new Array(
    "slideCornerBy('ne',100,0,1000)",
    "slideCornerBy('nw',100,0,1000)",
    "slideCornerBy('nw',0,-100,1000)",
    "slideCornerBy('sw',0,-100,1000)"
  );
  ele3 = document.getElementById('ele3').cbe;
  ele3.background('#8888ff');
  ele3.sequence = new Array(
    "slideCornerBy('ne',0,70-ph,1000)",
    "slideCornerBy('se',0,70-ph,1000)",
    "slideCornerBy('nw',70-pw,0,1000)",
    "slideCornerBy('ne',70-pw,0,1000)",
    "slideCornerBy('se',0,ph-70,1000)",
    "slideCornerBy('ne',0,ph-70,1000)",
    "slideCornerBy('se',pw-70,0,1000)",
    "slideCornerBy('nw',pw-70,0,1000)"
  );
  init();
}
function init() {
  ele1.resizeTo(50,50);
  ele1.moveTo('center');
  ele1.show();
  ele2.resizeTo(50,50);
  ele2.moveTo('sw',10);
  ele2.show();
  ele3.resizeTo(50,50);
  ele3.moveTo('se',10);
  ele3.show();
  document.forms['form1'].txtC.focus();
  document.forms['form1'].txtC.select();
  return false;
}
function handleSubmit() {
  ele1.slideCornerBy(
    document.forms['form1'].txtC.value,
    document.forms['form1'].txtX.value,
    document.forms['form1'].txtY.value,
    document.forms['form1'].txtT.value
  );
  document.forms['form1'].txtX.focus();
  document.forms['form1'].txtX.select();
  return false;
}
function startCycle() {
  init();
  ele1.startSequence();
  ele2.startSequence();
  ele3.startSequence();
}
function stopCycle() {
  ele1.stopSequence();
  ele2.stopSequence();
  ele3.stopSequence();
}

Here's the onClick handler for the "Start Sequence" button.

onclick="startCycle()

Here's the onClick handler for the "Stop" button.

onclick="stopCycle()