Transparent scrolling text

**kmclaurin** · 08-11-2011, 04:57 PM

Hi,
I'm putting together a website for my company.
My boss wants our 'slogan' to scroll across the screen, left to right.
He wants this to be transparent, going across the picture we have chosen for our header on each page. What is the easiest way to do this?

Thanks!

**jscheuer1** · 08-11-2011, 06:14 PM

Anything that's transparent is invisible.

**djr33** · 08-11-2011, 07:02 PM

Do you mean the background is transparent (so you only see the text)? For that, just don't use any background and position it above other elements. That should usually work.

Or do you want it to be semi-transparent, or translucent? You can set the opacity (the opposite of transparency) lower with CSS.

**kmclaurin** · 08-13-2011, 05:18 PM

Hi,
He wants to see the picture behind the scrolling text. He doesn't want a rectangular, opaque box on the picture, through which the text scrolls.
Thanks,

**Deadweight** · 08-14-2011, 07:06 AM

A way i can think of doing this is making a picture that is opaque then adding either a javascipt code or marquee over the picture (like a background picture)
But i can be completely wrong in that thought

**azoomer** · 08-14-2011, 08:14 AM

Maybe you can use this script:
http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

Place it right below the header, set the background of the marquee to transparent and put a negative margin on the containing div. That should do it. Only thing is that it's moving from right to left. But it would be difficult to read if it was moving the other way, wouldn't it ?

**vwphillips** · 08-14-2011, 03:39 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.parent {
  position:absolute;z-Index:101;left:0px;top:50px;width:100%;height:75px;border:solid red 0px;
}

#img1 {
  position:absolute;left:0px;top:0px;width:100px;height:75px;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}


/*]]>*/
</style></head>

<body>

<div class="parent" >
 <img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
</div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcMarquee(o){
 var obj=document.getElementById(o.ID),p=obj.parentNode,w=obj.offsetWidth,now=p.offsetWidth,sec=o.Duration;
 p.style.visibility='hidden';
 p.style.overflow='hidden';
 obj.style.visibility='visible';
 obj.style.left=now+'px';
 this.obj=obj;
 this.p=p;
 this.to=w;
 this.max=now;
 this.now=now;
 this.ms=typeof(ms)=='number'?sec*1000:10000;
 this.dly=null;
 this.marquee();
}

zxcMarquee.prototype={

 marquee:function(){
  clearTimeout(this.dly);
  this.mS=this.ms*Math.abs((this.p.offsetWidth+this.to)/this.max);
  this.animate(this.now,-this.to,new Date(),this.mS);
 },

 animate:function(f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=Math.floor((t-f)/mS*ms+f);
  if (isFinite(now)){
   this.now=now;
  }
  this.obj.style.left=this.now+'px';
  if (ms<this.mS){
   this.dly=setTimeout(function(){ oop.animate(f,t,srt,mS); },10);
  }
  else {
   this.now=this.p.offsetWidth;
   this.marquee();
  }
 }

}

new zxcMarquee({
 ID:'img1',   // the unique ID name of the scrolling element. (string)
 Duration:10  //(optional) the duration of scroll in seconds. (number, default = 10)
});

/*]]>*/
</script>
</body>

</html>

Thread: Transparent scrolling text

Thread Tools

Search Thread

Transparent scrolling text

Bookmarks

Bookmarks

Posting Permissions