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-fader-logo-effect.htm / htm



  
  <!-- ONE STEP TO INSTALL LOGO FADER:
  
    1.  Copy the coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the BODY of your HTML document  -->
  
  <BODY>
  
  <a name="logoAnchor"> </a>
  <div id="logo" style="position:absolute;visibility:visible;">
  <img name="logoIm" src="http://javascript.internet.com/img/logo-fader/logo-fader.gif" width=548 height=55>
  </div>
  
  <SCRIPT LANGUAGE="JavaScript1.2">
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  <!-- Original:  Bob Simpson (webmaster@maryjanebrown.net) -->
  <!-- Web Site:  http://www.maryjanebrown.net/webmaster -->
  
  <!-- Begin
  function BrowserCheck() {
  var b = navigator.appName;
  if (b == "Netscape") this.b = "NS";
  else if (b == "Microsoft Internet Explorer") this.b = "IE";
  else this.b = b;
  this.v = parseInt(navigator.appVersion);
  this.NS = (this.b == "NS" && this.v >= 4);
  this.NS4 = (this.b == "NS" && this.v == 4);
  this.NS5 = (this.b == "NS" && this.v == 5);
  this.IE = (this.b == "IE" && this.v >= 4);
  this.IE4 = (navigator.userAgent.indexOf('MSIE 4') > 0);
  this.IE5 = (navigator.userAgent.indexOf('MSIE 5') > 0);
  if (this.IE5 || this.NS5) this.VER5 = true;
  if (this.IE4 || this.NS4) this.VER4 = true;
  this.oldVer = (! this.VER5 && ! this.VER4) ? true : false;
  this.min = (this.NS || this.IE);
  }
  is = new BrowserCheck()
  var myLogo = (is.NS4) ? document.layers["logo"] : document.all["logo"].style;
  var logoWidth = (is.NS4) ? document.logo.document.logoIm.width : document.logoIm.width;
  var logoHeight = (is.NS4) ? document.logo.document.logoIm.height : document.logoIm.height;
  var halfHeight = logoHeight / 2;
  var windowWidth = (is.NS4) ? window.innerWidth - 16 : document.body.offsetWidth - 20;
  var halfWidth = logoWidth / 2;
  var cliplogoHeightor = (is.NS4) ? 
  'myLogo.clip.top = 0;' +
  'myLogo.clip.right = right;' +
  'myLogo.clip.bottom = logoHeight;' +
  'myLogo.clip.left = left; '
  :
  'str="rect(0 " + right + " " + logoHeight + " " + left + ")";' +
  'myLogo.clip = str; '
  var clipLogoVert = (is.NS4) ? 
  'myLogo.clip.top = up;' +
  'myLogo.clip.right = logoWidth;' +
  'myLogo.clip.bottom = dn;' +
  'myLogo.clip.left = 0; '
  :
  'str="rect(" + up + " " + logoWidth + " " + dn + " 0)";' +
  'myLogo.clip = str;'
  var right = logoWidth, left = 0;
  var cnt = 0, up = halfHeight, dn = halfHeight, upDown;
  var logoWidth, logoHeight;
  // ---------------  User modifiable variables  ----------------------
  
  //if useAnchorPosition is true logo will be positioned where you put the "logoAnchor"
  //set to false to center logo - also set myLogo.top to desired position
  
  var useAnchorPosition = false;                 // set to false to set your own logo position below
  if (! useAnchorPosition) {
  myLogo.left = ((windowWidth / 2) - (logoWidth / 2));         // centers logo - comment out if using line below
  //myLogo.left = 100;         // remove '//' to set left position
  myLogo.top = 200;         // sets logo top
  }
  var scrollInc = 5;        // sets # of pixels to scroll in 1 time frame
  var scrollSpeed = 10;        // sets the scroll speed
  // ------------------------------------------------------------------
  function scrollLogo() {
  if (cnt == 0) {
  up-- ; dn++;
  if (up < -10) {
  right = logoWidth;
  left = 0;
  upDown = -scrollInc;
  cnt++;
  }
  eval(clipLogoVert);
  }
  if (cnt == 1) {
  right +=  upDown;
  left -= upDown;
  if (right < halfWidth-40) {
  right = halfWidth;
  left = halfWidth;
  upDown = scrollInc;
  cnt++;
  }
  eval(cliplogoHeightor);
  }
  if (cnt == 2) {
  right +=  upDown;
  left -= upDown;
  if (right > logoWidth+20) {
  right = logoWidth;
  left = 0;
  up = 0;
  dn = logoHeight;
  cnt++;
  }
  eval(cliplogoHeightor);
  }
  if (cnt == 3) {
  up++;
  dn--;
  if (dn < halfHeight - 10) {
  up = halfHeight;
  dn = halfHeight;
  right = logoWidth;
  left = 0;
  upDown = scrollInc;
  cnt = 0;
  }
  eval(clipLogoVert)
  }
  setTimeout("scrollLogo()", scrollSpeed);
  }
  if (! is.oldVer)window.onload = init;
  function init() {
  positionLogo();
  scrollLogo();
  }
  var L, T;
  var pos = (is.NS4) ? pos = document.anchors['logoAnchor'] : document.all['logoAnchor'];
  var posStr = (is.NS4) ?  'L = pos.x ; T = pos.y' : 'L = pos.offsetLeft; T = pos.offsetTop';
  function positionLogo() {
  if (! useAnchorPosition) return;
  eval(posStr);
  myLogo.top = T;
  myLogo.left = L;
  }
  //  End -->
  </script>
  <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:  4.44 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.