Results 1 to 2 of 2

Thread: Script to animate GIF on Webpage Scoll

  1. #1
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Script to animate GIF on Webpage Scoll

    I font know how simple this is but I seems possible. I am creating a website which I want the images down the side to animate in relation the the users position down the page. So it needs to only animate when the user scrolls down the page. Thanks Spyke

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 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>
    </head>
    
    <body>
    javascript cnnot control the 'playing' of a gif but can control the loading of a gif
    <div style="height:600px;" ></div>
    <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
    <div style="height:600px;" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var swap={
    
     init:function(id,src,top){
      var obj=document.getElementById(id),img=new Image();
      img.src=src;
      obj={
       obj:obj,
       src1:obj.src,
       src2:src,
       top:top
      }
      this.addevt(window,'scroll','swap',obj);
     },
    
     swap:function(obj){
      var top=this.wwhs()[3];
      if (top>obj.top&&obj.obj.src==obj.src1){
       obj.obj.src=obj.src2
      }
      else if (top<obj.top&&obj.obj.src==obj.src2){
       obj.obj.src=obj.src1
      }
     },
    
     wwhs:function(){
      if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    }
    
    swap.init('tst','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',500)
    
    /*]]>*/
    </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
  •