Results 1 to 7 of 7

Thread: Transparent scrolling text

  1. #1
    Join Date
    Oct 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Transparent scrolling text

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Anything that's transparent is invisible.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Oct 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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,

  5. #5
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    372
    Thanks
    5
    Thanked 35 Times in 33 Posts

    Default

    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

  6. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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 ?

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •