topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-javascript-effect-image-layer-effect.htm / htm



  
  <!-- THREE STEPS TO INSTALL Persistent LAYER:
  
    1.  Copy the coding into the HEAD of your HTML document
    2.  Add the onLoad event handler into the BODY tag
    3.  Put the last coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Original:  Eddie Traversa (psych3@primus.com.au) -->
  <!-- Web Site:  http://dhtmlnirvana.com/ -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Begin
  window.onerror = null;
  var topMargin = 100;
  var slideTime = 1200;
  var ns6 = (!document.all && document.getElementById);
  var ie4 = (document.all);
  var ns4 = (document.layers);
  function layerObject(id,left) {
  if (ns6) {
  this.obj = document.getElementById(id).style;
  this.obj.left = left;
  return this.obj;
  }
  else if(ie4) {
  this.obj = document.all[id].style;
  this.obj.left = left;
  return this.obj;
  }
  else if(ns4) {
  this.obj = document.layers[id];
  this.obj.left = left;
  return this.obj;
     }
  }
  function layerSetup() {
  floatLyr = new layerObject('floatLayer', pageWidth * .5);
  window.setInterval("main()", 10)
  }
  function floatObject() {
  if (ns4 || ns6) {
  findHt = window.innerHeight;
  } else if(ie4) {
  findHt = document.body.clientHeight;
     }
  } 
  function main() {
  if (ns4) {
  this.currentY = document.layers["floatLayer"].top;
  this.scrollTop = window.pageYOffset;
  mainTrigger();
  }
  else if(ns6) {
  this.currentY = parseInt(document.getElementById('floatLayer').style.top);
  this.scrollTop = scrollY;
  mainTrigger();
  } else if(ie4) {
  this.currentY = floatLayer.style.pixelTop;
  this.scrollTop = document.body.scrollTop;
  mainTrigger();
     }
  }
  function mainTrigger() {
  var newTargetY = this.scrollTop + this.topMargin;
  if ( this.currentY != newTargetY ) {
  if ( newTargetY != this.targetY ) {
  this.targetY = newTargetY;
  floatStart();
  }
  animator();
     }
  }
  function floatStart() {
  var now = new Date();
  this.A = this.targetY - this.currentY;
  this.B = Math.PI / ( 2 * this.slideTime );
  this.C = now.getTime();
  if (Math.abs(this.A) > this.findHt) {
  this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
  this.A = this.A > 0 ? this.findHt : -this.findHt;
  }
  else {
  this.D = this.currentY;
     }
  }
  function animator() {
  var now = new Date();
  var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
  newY = Math.round(newY);
  if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
  if ( ie4 )document.all.floatLayer.style.pixelTop = newY;
  if ( ns4 )document.layers["floatLayer"].top = newY;
  if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px";
     }
  }
  function start() {
  if(ns6||ns4) {
  pageWidth = innerWidth;
  pageHeight = innerHeight;
  layerSetup();
  floatObject();
  }
  else if(ie4) {
  pageWidth = document.body.clientWidth;
  pageHeight = document.body.clientHeight;
  layerSetup();
  floatObject();
     }
  }
  //  End -->
  </script>
  
  </HEAD>
  
  <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  
  <BODY onLoad="start()">
  
  <!-- STEP THREE: Copy this code into the BODY of your HTML document  -->
  
  <DIV id="floatLayer" style="position: absolute; height:200px; width:200px; left:30px; top:1px;z-index: 100">This is a Floating Layer. Replace this content with your own.</DIV>
  
  <p><center>
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  </center><p>
  
  <!-- Script Size:  3.52 KB -->
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.