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 Coder
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to achieve certain effect

    Hello everyone, so .. I'm trying to achieve an effect with javascript. What Im trying is that when the div is visible(user will have to scroll down to see it) that 2 images slowly slide from center to the right (they're were behind a big image) going from transparent to opaque.

    But I've got no idea how to maybe achieve that.... any ideas?


    Code:
    <div style="width:100%">
        <img src="#"/ id="Im big and not transparent" style="position:absolute">
        <img src="#" id="I slide to the left" style="position:absolute"/>
        <img src="#" id="I slide to the left also" style="position:absolute"/>
        <img src="#" id="I  slide to the right" style="position:absolute"/>
        <img src="#" id="I slide to the right as well" style="position:absolute"/>
    </div>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,494
    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[*/
    
    .holder  {
      position:absolute;left:500px;top:400px;width:250px;height:200px;border:solid red 1px;
    }
    
    .holder IMG {
      position:absolute;width:250px;height:200px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <div class="holder">
      <img id="s1" src="http://www.carbonlighthouse.com/wp-content/uploads/2011/08/bird.jpg" width="200" height="200" />
      <img id="s2" src="http://www.carbonlighthouse.com/wp-content/uploads/2011/08/bird.jpg" width="200" height="200" />
     </div>
     <div style="height:2000px;width:0px;" ></div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSlideScroll={
    
     init:function(o){
      var id=o.ElementID,m=o.Mode,ms=o.Animate,f=o.From,t=o.To,s=o.Scroll,f=typeof(f)=='number'?f:0,t=typeof(t)=='number'?t:0,obj=document.getElementById(id);
      if (obj){
       o.a=[obj,m,[f,t,f-t],f];
       o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
       o.s=typeof(s)=='number'&&ms>0?s:0;
       o.ud=false;
       this.addevt(window,'scroll','scroll',o);
      }
     },
    
     scroll:function(o){
      var ud=(window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop)>o.s,t=o.a[2][ud?1:0];
      if (o.ud!=ud){
       this.animate(o,o.a,o.a[3],t,new Date(),o.ms*Math.abs((t-o.a[3])/o.a[2][2]));
      }
      o.ud=ud
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcSlideScroll.init({
     ElementID:'s1',
     Animate:1000,
     Mode:'left',
     From:0,
     To:400,
     Scroll:200
    });
    
    zxcSlideScroll.init({
     ElementID:'s2',
     Animate:1000,
     Mode:'left',
     From:0,
     To:-400,
     Scroll:200
    });
    
    /*]]>*/
    </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 Coder
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    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[*/
    
    .holder  {
      position:absolute;left:500px;top:400px;width:250px;height:200px;border:solid red 1px;
    }
    
    .holder IMG {
      position:absolute;width:250px;height:200px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <div class="holder">
      <img id="s1" src="http://www.carbonlighthouse.com/wp-content/uploads/2011/08/bird.jpg" width="200" height="200" />
      <img id="s2" src="http://www.carbonlighthouse.com/wp-content/uploads/2011/08/bird.jpg" width="200" height="200" />
     </div>
     <div style="height:2000px;width:0px;" ></div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSlideScroll={
    
     init:function(o){
      var id=o.ElementID,m=o.Mode,ms=o.Animate,f=o.From,t=o.To,s=o.Scroll,f=typeof(f)=='number'?f:0,t=typeof(t)=='number'?t:0,obj=document.getElementById(id);
      if (obj){
       o.a=[obj,m,[f,t,f-t],f];
       o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
       o.s=typeof(s)=='number'&&ms>0?s:0;
       o.ud=false;
       this.addevt(window,'scroll','scroll',o);
      }
     },
    
     scroll:function(o){
      var ud=(window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop)>o.s,t=o.a[2][ud?1:0];
      if (o.ud!=ud){
       this.animate(o,o.a,o.a[3],t,new Date(),o.ms*Math.abs((t-o.a[3])/o.a[2][2]));
      }
      o.ud=ud
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcSlideScroll.init({
     ElementID:'s1',
     Animate:1000,
     Mode:'left',
     From:0,
     To:400,
     Scroll:200
    });
    
    zxcSlideScroll.init({
     ElementID:'s2',
     Animate:1000,
     Mode:'left',
     From:0,
     To:-400,
     Scroll:200
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Wow! That's exactly what I had in mind xD! amazing! thanks !


  •  

    Posting Permissions

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