Have you seen this effect?

**sergiozambrano** · 06-21-2009, 03:11 AM

I've seen it somewhere, but it's not in script-a-culous…
http://www.fkq.com/ It's the sliding tabbed-divs effect (here is flash)

It was as easy as creating the different content divs and name them consecutively.

If you haven't seen it, How would you look for it? (English is just my second language)

Thanks.

**thetestingsite** · 06-21-2009, 01:18 PM

I suggest looking through jquery to find the sliding panels effect you are looking for.

Hope this helps.

**vwphillips** · 06-23-2009, 11:50 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[*/
#tst {
  position:relative;width:480px;height:200px;border:solid black 1px;
}

.frame {
  position:relative;overflow:hidden;width:50px;height:200px;background-Color:#FFCC66;float:left;margin-Left:5px;
}

.framemax {
  position:absolute;left:0px;top:0px;width:250px;height:200px;background-Color:#FFFFCC;
}

.active {
  position:relative;width:250px
}

.content {
  position:absolute;left:0px;top:205px;width:250px;height:100px;background-Color:#CCFFFF;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
//  parameter 0 = the mode(see Note 2).                                                                     (string)
//  parameter 1 = the unique ID name or element object.                                                     (string or element object)
//  parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
//  parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
//  parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
//  parameter 5 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
//                 field 0 the minimum. (digits)
//                 field 1 the maximum. (digits)
//  parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  The default units(excepting opacity) are 'px'.
//  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  To 'toggle' the effect include '#' in parameter 0.
//           The first call will set the toggle parameters.
//           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
//  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
//           whenever required, say from an onclick/mouseover/out event.
//           The period parameter will be retained unless re-specified.
//  Note 5: parameter 5 is of particular use when re-calling the effect
//          in mid travel to retain an constant rate of progression.
//  Note 6: parameters 2 and 3 must be different values to execute the script.
//


// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms,scale,curve);
 }
 else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
 return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 clearTimeout(this.to);
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.ms=this.mS;
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 this.ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
 this.apply();
 if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Bounce&&this.Bounce[2]>0) this.bounce();
 }
}

zxcBAnimatorOOP.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

zxcBAnimatorOOP.prototype.bounce=function(){
 if (this.Bounce[2]%2==0)
 this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
 this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
 this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips http://www.vicsjavascripts.org.uk  (23-June-2009)

function zxcSlider(id,fcls,fmcls,ccls,ms){
 var obj=document.getElementById(id);
 var frames=zxcByClassName(fcls,obj,'DIV');
 var content=zxcByClassName(ccls,obj,'DIV');
 this.ms=ms||1000;
 this.frames=[];
 this.mm=[0,0];
 for (var z0=0;z0<frames.length;z0++){
  if (frames[z0].offsetWidth>this.mm[1]){
   this.mm[1]=frames[z0].offsetWidth; this.lst=z0;
  }
  else {
   this.mm[0]=frames[z0].offsetWidth;
  }
  this.addevt(frames[z0],'mouseup','Expand',z0);
 }
 for (var lft=frames[0].offsetLeft,fm,z1=0;z1<frames.length;z1++){
  this.frames.push([zxcBAnimator('width',frames[z1],frames[z1].offsetWidth-2,this.mm[z1!=this.lst?0:1],10),zxcBAnimator('opacity',zxcByClassName(fmcls,frames[z1],'DIV')[0],2,z1!=this.lst?0:100,10),(this.mm[0]+lft)*z1+lft,zxcBAnimator('left',content[z1],-2,frames[this.lst].offsetLeft,10),zxcBAnimator('opacity',content[z1],5,z1!=this.lst?0:100,10)]);
 }
}

zxcSlider.prototype.Expand=function(nu){
 if (nu!=this.lst){
  this.frames[this.lst][0].update([this.frames[this.lst][0].data[0],this.mm[0]],this.ms);
  this.frames[this.lst][1].update([this.frames[this.lst][1].data[0],0],this.ms);
  this.frames[this.lst][4].update([this.frames[this.lst][4].data[0],0],this.ms);
  this.lst=nu;
  this.frames[this.lst][0].update([this.frames[this.lst][0].data[0],this.mm[1]],this.ms);
  this.frames[this.lst][1].update([this.frames[this.lst][1].data[0],100],this.ms);
  this.frames[this.lst][4].update([this.frames[this.lst][4].data[0],100],this.ms);
  for (var z0=0;z0<this.frames.length;z0++){
   this.frames[z0][3].update([this.frames[z0][3].data[0],this.frames[this.lst][2]],this.ms);
  }
 }
}

zxcSlider.prototype.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); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](p); };
  else o['on'+t]=o[f];
 }
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}
function zxcSV(obj,par){
 if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
 return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}

function zxcSVInt(obj,par){
 if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}



/*]]>*/
</script>

</head>

<body onload="S=new zxcSlider('tst','frame','framemax','content',1000);">
<div id="tst" >
<div class="frame active" >0<div class="framemax" >0</div></div>
<div class="content" >0</div>
<div class="frame" >1<div class="framemax" >1</div></div>
<div class="content" >1</div>
<div class="frame" >2<div class="framemax" >2</div></div>
<div class="content" >2</div>
<div class="frame" >3<div class="framemax" >3</div></div>
<div class="content" >3</div>
<div class="frame" >4<div class="framemax" >4</div></div>
<div class="content" >4</div>
</div>



</body>

</html>

Thread: Have you seen this effect?

Thread Tools

Search Thread

Have you seen this effect?

Bookmarks

Bookmarks

Posting Permissions