Transparent scrolling text [Archive]

View Full Version : 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

<!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>