SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: FlipBook effect

  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 ?


  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Here's some sample JavaScript code that does an animation which slows when you hold down a click on it while it's flipping.
    http://jsfiddle.net/pmw57/FZUqT/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is good Can it do a page flip effect ?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    That is good Can it do a page flip effect ?
    That would depend on how much artistry skill you can achieve in parts around the animation itself.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    It can't be done automatically with scripting ?
    Not in any way that is able to be easily developed by anyone here, or that can be easily conveyed through this medium.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the script creating the animation in the code ?

  8. #8
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I overlooked, never mind

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;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>

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;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>

  11. #11
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Better. Any way to include a page curl with some blur ?

  12. #12
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could modify your images or introduce an element for the fold

    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;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>

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean a element for a fold ? What about making it horizontal ? What about a drop shadow ?

  14. #14
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •