Fade-In Text / Images Question

programming web dev
1

So, I don’t really know much about Javascript. I want text and images on a page to fade in when the page is loaded. The elements would start at an opacity of zero and go up to 100%.

I found some random code on various sites and pasted it together and kind of got something working, but it isn’t really what I want. It makes the text start at white and fade up to black, so I wouldn’t be able to use this on any other background besides white.

And this code is using RGB numbers and I couldn’t figure out how to just use standard web hexcodes like #FFFFFF.

Javascript:

<script language="JavaScript1.2">
hex=255 // Initial color value.

function fadetext(){ 
if(hex>0) { //If color is not black yet
hex-=11; // increase color darkness
document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",50); 
}
else
hex=255 //reset hex value
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(fadetext);
addLoadEvent(function() {
  /* more code to run on page load */ 
});

</script>

HTML:

<div id="sample" style="width:100%"><h3>John slowly faded into view</h3></div>