FlipBook effect

I want to create this flipbook effect using jQuery / JS. When you click as it’s flipping you can slow it down. I hope Flash isn’t my only option ?

Here’s some sample JavaScript code that does an animation which slows when you hold down a click on it while it’s flipping.

That is good :slight_smile: Can it do a page flip effect ?

That would depend on how much artistry skill you can achieve in parts around the animation itself.

It can’t be done automatically with scripting ? I can do the artistry effect but what am I needing to create the page flip itself or a portion of it ?

Not in any way that is able to be easily developed by anyone here, or that can be easily conveyed through this medium.

Is the script creating the animation in the code ?

I overlooked, never mind :slight_smile:

<!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;overflow:hidden;left:100px;top:100px;width:150px;height:250px;border:solid red 1px;
}

#tst IMG {
  border:solid red 1px;
}

.page {
}

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

<body>

<div id="tst" onmouseover="FB1.hold=3000"  onmouseout="FB1.hold=1000">

</div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcFlipBook(o){
 var obj=document.getElementById(o.ID),ary=o.ImageArray,w=obj.offsetWidth,ctr=obj.offsetHeight/2,img,ms=o.EffectDuration,hold=o.EffectDuration,z0=0;
 for (;z0<ary.length;z0++){
  img=document.createElement('IMG');
  img.src=ary[z0];
  img.style.position='absolute';
  img.style.left='-1px';
  img.style.top=ctr+'px';
  img.style.width=w+'px';
  img.style.height=(z0>0?0:ctr)+'px';
  obj.appendChild(img);
  ary[z0]=img;
 }
 this.ary=ary;
 this.ms=typeof(ms)=='number'?ms:100;
 this.hold=typeof(hold)=='number'?hold:this.ms*10;;
 this.ctr=ctr;
 this.cnt=0;
 this.rotate();
}

zxcFlipBook.prototype={

 rotate:function(){
  var ary=this.ary,ctr=this.ctr,cnt=this.cnt,z0=0;
  if (cnt==0){
   for (;z0<ary.length;z0++){
    ary[z0].style.top='1000px';
   }
  }
  ary[cnt].style.zIndex='2';
  ary[cnt].style.top=ctr+'px';
  this.animate(ary[cnt],'height',ctr,1,new Date(),this.ms,true);
  cnt=++cnt%ary.length;
  ary[cnt].style.zIndex='0';
  ary[cnt].style.top=ctr+'px';
  ary[cnt].style.height=ctr+'px';
  this.cnt=cnt;
 },

 animate:function(obj,mde,f,t,srt,mS,top,auto){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style[mde]=Math.max(now,f<0||t<0?now:0)+'px';
  }
  if (ms<mS){
   setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,top,auto); },10);
  }
  else {
   this.now=t;
   obj.style[mde]=t+'px';
   if (top){
    this.animate(obj,'top',this.ctr,(this.cnt-1)*3,new Date(),this.ms,null,true);
   }
   if (auto){
    this.dly=setTimeout(function(){ oop.rotate(); },this.hold);
   }
  }
 }

}

var FB1=new zxcFlipBook({
 ID:'tst',
 ImageArray:[
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon5.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon6.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon7.gif']
  ],
  EffectDuration:200,
  HoldDuration:1000

});

/*]]>*/
</script></body>

</html>
<!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;overflow:hidden;left:100px;top:100px;width:150px;height:250px;border:solid #7B7B7B 1px;background-Color:#DDDDDD
}

#tst IMG {
  border:solid #7B7B7B 1px;
}

.page {
}

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

<body>

<div id="tst" onmouseover="FB1.hold=500"  onmouseout="FB1.hold=50">

</div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcFlipBook(o){
 var obj=document.getElementById(o.ID),ary=o.ImageArray,w=obj.offsetWidth,ctr=obj.offsetHeight/2,img,ms=o.EffectDuration,hold=o.HoldDuration,z0=0;
 for (;z0<ary.length;z0++){
  img=document.createElement('IMG');
  img.src=ary[z0];
  img.style.position='absolute';
  img.style.left='-1px';
  img.style.top=ctr+'px';
  img.style.width=w+'px';
  img.style.height=(z0>0?0:ctr)+'px';
  obj.appendChild(img);
  ary[z0]=img;
 }
 this.ary=ary;
 this.ms=typeof(ms)=='number'?ms:100;
 this.hold=typeof(hold)=='number'?hold:this.ms*10;;
 this.ctr=ctr;
 this.cnt=0;
 this.rotate();
}

zxcFlipBook.prototype={

 rotate:function(){
  var ary=this.ary,ctr=this.ctr,cnt=this.cnt,z0=0;
  this.lstcnt=cnt;
  if (cnt==0){
   for (;z0<ary.length;z0++){
    ary[z0].style.top='1000px';
   }
  }
  ary[cnt].style.zIndex='2';
  ary[cnt].style.top=ctr+'px';
  this.animate(ary[cnt],'height',ctr,1,new Date(),this.ms,true);
  cnt=++cnt%ary.length;
  ary[cnt].style.zIndex='0';
  ary[cnt].style.top=ctr+'px';
  ary[cnt].style.height=ctr+'px';
  this.cnt=cnt;
 },

 animate:function(obj,mde,f,t,srt,mS,top,auto){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style[mde]=Math.max(now,f<0||t<0?now:0)+'px';
  }
  if (ms<mS){
   setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,top,auto); },10);
  }
  else {
   this.now=t;
   obj.style[mde]=t+'px';
   if (top){
    this.animate(obj,'top',this.ctr,Math.max((this.lstcnt-1)*3,0),new Date(),this.ms,null,true);
   }
   if (auto){
    this.dly=setTimeout(function(){ oop.rotate(); },this.hold);
   }
  }
 }

}

var FB1=new zxcFlipBook({
 ID:'tst',
 ImageArray:[
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon5.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon6.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon7.gif']
  ],
  EffectDuration:50,
  HoldDuration:50

});

/*]]>*/
</script></body>

</html>

Better. Any way to include a page curl with some blur ?

you could modify your images or introduce an element for the fold

<!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;overflow:hidden;left:100px;top:100px;width:150px;height:200px;border:solid #7B7B7B 1px;background-Color:#DDDDDD
}

#tst IMG {
  border:solid #7B7B7B 1px;overflow:hidden;
}

.fold {
 position:absolute;left:0px;width:100%;top:90px;height:20px;background-Color:#9A9A9A;
/* Moz */
  opacity: .3;
/* IE5-7 */
  filter: alpha(opacity=30);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}


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

<body>

<div id="tst" onmouseover="FB1.hold=500"  onmouseout="FB1.hold=100">
<div class="fold" ></div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcFlipBook(o){
 var obj=document.getElementById(o.ID),ary=o.ImageArray,lgth=ary.length-1,w=obj.offsetWidth,ctr=obj.offsetHeight/2,img,ms=o.EffectDuration,hold=o.HoldDuration,z0=0;
 for (;z0<=lgth;z0++){
  img=document.createElement('IMG');
  img.src=ary[z0];
  img.style.position='absolute';
  img.style.left='-1px';
  img.style.top=ctr+'px';
  img.style.width=w+'px';
  img.style.height=ctr+'px';
  obj.appendChild(img);
  ary[z0]=img;
 }
 this.obj=obj;
 this.ary=ary;
 this.ms=typeof(ms)=='number'?ms/2:100;
 this.hold=typeof(hold)=='number'?hold:this.ms*10;;
 this.ctr=ctr;
 this.cnt=0;
 this.reset();
 this.rotate();
}

zxcFlipBook.prototype={

 rotate:function(){
  var ary=this.ary,ctr=this.ctr,cnt=this.cnt,z0=1;
  this.lstcnt=cnt;
  ary[cnt].style.zIndex='2';
  ary[cnt].style.top=ctr+'px';
  this.animate(ary[cnt],'height',ctr,2,new Date(),this.ms,true);
  cnt=++cnt%ary.length;
  ary[cnt].style.zIndex='0';
  ary[cnt].style.top=ctr+'px';
  ary[cnt].style.height=ctr+'px';
  this.cnt=cnt;
 },

 reset:function(){
  var ary=this.ary,lgth=ary.length-1,z0=1;
  this.obj.style.height=this.ctr*2+lgth*2+'px';
  for (;z0<=lgth;z0++){
   ary[z0].style.top=this.ctr*2+((lgth-z0)*2)+'px';
  }
 },

 animate:function(obj,mde,f,t,srt,mS,top,auto){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,pobj=oop.obj,t;
  if (isFinite(now)){
   obj.style[mde]=Math.max(now,f<0||t<0?now:0)+'px';
  }
  if (ms<mS){
   setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,top,auto); },10);
  }
  else {
   this.now=t;
   obj.style[mde]=t+'px';
   if (top){
    oop.obj.style.height=parseInt(oop.obj.style.height)-2+'px';
    oop.animate(obj,'top',oop.ctr,Math.max((oop.lstcnt-1)*2,0),new Date(),oop.ms,null,true);
   }
   if (auto){
    if (oop.lstcnt==oop.ary.length-1){
     oop.reset();
    }
    oop.dly=setTimeout(function(){ oop.rotate(); },oop.hold);
   }
  }
 }

}

var FB1=new zxcFlipBook({
 ID:'tst',
 ImageArray:[
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon5.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon6.gif'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon7.gif']
  ],
  EffectDuration:100,
  HoldDuration:50

});

/*]]>*/
</script></body>

</html>

What do you mean a element for a fold ? What about making it horizontal ? What about a drop shadow ?

Hello,
I had a search and found that you can search “Jquery flipbook effect” in google, then you will find a post named with it in Jquery forum, it will offer a solution for you.
By the way, the flipbook with page turning effect can be made with digital flipbook software.