Script to animate GIF on Webpage Scoll

**spyke89** · 03-25-2012, 02:38 PM

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

**vwphillips** · 03-26-2012, 11:58 AM

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>

Thread: Script to animate GIF on Webpage Scoll

Thread Tools

Search Thread

Script to animate GIF on Webpage Scoll

Bookmarks

Bookmarks

Posting Permissions