Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    looping sliding text change direction after first cycle

    Im trying to get an effect similar to the one on: http://www.theissland.com/
    where the text below we are keeps looping like that.

    I found this jquery code and tried to implement it on my homepage. It works fine until the first cycle of 4 headers end, then it starts to slide from left to right instead of right to left.

    Any ideas?

    Code:
    <script type="text/javascript">
    var heading_cur=0; 
    function showHeading(){ 
    $('#heading'+(heading_cur+1)).css({opacity: 0}).animate
    ({opacity: 1.0,left: "164px"}, 500); 
    setTimeout(hideHeading, 3500); } 
    function hideHeading(){ $('#heading'+(heading_cur+1)).css({opacity: 1})
    .animate({opacity: 0,left: "-50px"}, 500,function(){showHeading();}); 
    heading_cur=(heading_cur+1)%4; } $(document).ready(function() { showHeading(); }) </script>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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[*/
    
    #slogan_section {
     position:relative;width:500px;height:50px;
    }
    
    #slogan_section DIV {
     position:relative;
     font-Size:40px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="Auto" onmouseup="zxcSlider.Auto('slogan_section');" />
    <input type="button" name="" value="Pause" onmouseup="zxcSlider.Pause('slogan_section');" />
    <input type="button" name="" value="Next" onmouseup="zxcSlider.Next('slogan_section',1);" />
    <input type="button" name="" value="Back" onmouseup="zxcSlider.Next('slogan_section',-1);" />
    <input type="button" name="" value="GoTo 0" onmouseup="zxcSlider.GoTo('slogan_section',0);" />
    <input type="button" name="" value="GoTo 1" onmouseup="zxcSlider.GoTo('slogan_section',1);" />
    <input type="button" name="" value="GoTo 2" onmouseup="zxcSlider.GoTo('slogan_section',2);" />
    <input type="button" name="" value="GoTo 3" onmouseup="zxcSlider.GoTo('slogan_section',3);" />
    <input type="button" name="" value="GoTo 4" onmouseup="zxcSlider.GoTo('slogan_section',4);" />
    
     					<div class="slogan js-slogan" id="slogan_section">
    							<div>
    								BRAND BUILDERS.
    							</div>
    							<div>
    								PERFECTION HUNTERS.
    							</div>
    							<div>
    								NOT IN SHADOWS.
    							</div>
    							<div>
    								ALIVE!
    							</div>
    							<div>
    								TRENDSETTERS.
    							</div>
    					</div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSlider={
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||500):null;
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.c+ud);
      }
     },
    
     GoTo:function(id,c){
      var o=this['zxc'+id];
      if (o&&o.ary[c]){
       this.Pause(id);
       if (c!=o.c){
        o.ud=c>o.c?1:-1;
        this.rotate(o,c);
       }
      }
     },
    
     init:function(o){
      var id=o.ID,ud=o.Direction,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
      if (p){
       var clds=p.childNodes,sz=p.offsetWidth,ary=[],z0=0;
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         clds[z0].style.position='absolute';
         clds[z0].style.left=(ary.length>0?-sz:0)+'px';
         clds[z0].style.width=sz+'px';
         ary.push([clds[z0],'left']);
        }
       }
       o.id=id;
       o.ary=ary;
       o.lgth=ary.length-1;
       o.sz=sz;
       o.ms=typeof(ms)=='number'&&ms>10?ms:1000;
       o.hold=typeof(hold)=='number'&&hold>10?hold:o.ms*4;
       o.ud=typeof(ud)=='number'&&ud<0?-1:1;
       o.c=0;
       p.style.overflow='hidden';
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>10?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,a){
      var c=o.c;
      this.Pause(o.id);
      o.auto=a===true;
      c=o.auto?c+o.ud:a;
      c=c>o.lgth?0:c<0?o.lgth:c;
      this.animate(o,o.ary[o.c],0,o.sz*(o.ud>0?1:-1),new Date(),o.ms);
      this.animate(o,o.ary[c],o.sz*(o.ud>0?-1:1),0,new Date(),o.ms,true);
      o.c=c;
     },
    
     animate:function(o,a,f,t,srt,mS,nxt){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
       o.auto&&nxt?oop.Auto(o.id,o.hold):null;
      }
     }
    
    
    }
    
    zxcSlider.init({
     ID:'slogan_section', // the unique ID name of the parent DIV.                 (string)
     Direction:1,         //(optional) the slide direction, 1 = forward, -1 =back. (number, default = 1 = forward)
     Animate:500,         //(optional) the animation duration in millisec.         (number, default = 1000)
     AutoHold:2000,       //(optional) the auto rotate delay in millisec.          (number, default = Animate*4)
     AutoStart:2000       //(optional) the auto rotate start delay in millisec.    (number, default = no auto start)
    })
    /*]]>*/
    </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/

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!

    Works like a charm!


  •  

    Posting Permissions

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