Help with some js animation

**ReFreezed** · 12-04-2012 11:07 PM

Awesome! It's just so confusing why Fx.Transitions.bounceOut worked in the template but not on the other pages. But oh well...

**darkitten** · 12-04-2012 11:29 PM

indeed, that is why i still believe we might have still missed something, or something is still nor right...
but it does work, so i`m happy! Thank you!

i`m curious if i try to replicate it again on another joomla install, which one will work. must try that soon enaugh...

**vwphillips** · 12-05-2012 09:05 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>
<style type="text/css">
/*<![CDATA[*/
.slidediv {
 position:absolute;left:0px;top:0px;width:100%;height:500px;background-Color:#FFCC66;
}

/*]]>*/
</style></head>

<body>
<div id="tst" class="slidediv" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></div>

<script type="text/javascript">
/*<![CDATA[*/
// Slide Bounce (05-December-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcSlideBounce={

 init:function(o){
  var id=o.ID,t=o.SlideTo,ms=o.SlideDuration,sz=o.BounceSize,ms=typeof(ms)=='number'?ms:1000,obj=document.getElementById(id),img=obj.getElementsByTagName('IMG')[0],f=obj.offsetTop;
  o=zxcSlideBounce['zxc'+id]={
   obj:obj,
   ms:ms,
   mm:[f,typeof(t)=='number'?t:0],
   now:0,
   ud:true,
   bary:[typeof(sz)=='number'?sz:obj.offsetHeight/10,3,ms/2]
  }
  this.addevt(img,'mouseup','Slide',id);
 },

 Slide:function(id){
  var o=zxcSlideBounce['zxc'+id],t;
  if (o){
   clearTimeout(o.to);
   this.bary(o.bary,o.mm[o.ud?1:0],o.ud);
   this.slide(o,o.now,o.mm[o.ud?1:0],new Date(),o.ms,o.bary,'3s');
   o.ud=!o.ud;
  }
 },

 bary:function(b,t,ud){
  b[3]=[];
  for (var z0=0;z0<b[1];z0++){
   b[3].push((t+b[0]*(1-Math.sin((z0*90/b[1])*Math.PI/180))*(ud?-1:1)+.001));
   b[3].push(t+.001);
  }
 },

 slide:function(o,f,t,srt,mS,b,sc){
  var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(o.c.i*ms)+f:(t-f)/mS*ms+f);
  if (isFinite(now)){
   o.obj.style.top=now+'px';
   o.now=now;
  }
  if (ms<mS){
   o.to=setTimeout(function(){ oop.slide(o,f,t,srt,mS,b,sc); },10);
  }
  else {
   o.obj.styletop=t+'px';
   o.now=t;
   if (b&&b[3]&&b[3][0]){
    this.slide(o,t,b[3][0],new Date(),b[2]/(b[1]*2),b);
    b[3].splice(0,1);
   }
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p); });
  }
 }


}


zxcSlideBounce.init({
 ID:'tst',           // the unique ID name of the frame element.        (string)
 SlideTo:400,        // the slide end position.                         (number)
 SlideDuration:1000, //(optional) the slide duration in milli seconds.  (number, default = 1000)
 BounceSize:20       //(optional) the bounce size.                      (number, default = element height/10)
});
/*]]>*/
</script>
</body>

</html>

**darkitten** · 12-05-2012 01:59 PM

i`m really grateful for the time you took to post a reply for me, but i`m really lost. What is this code for, what shoudl i do with it?

Thread: Help with some js animation

Thread Tools

Display

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions