javascript - CSS Flipping Page Effect - Stack Overflow

I'm building an web application with effect similar to FlipBoard.At first, I was trying to use thi

I'm building an web application with effect similar to FlipBoard.

At first, I was trying to use this open source. But I don't really like the way it's implemented (create duplicates for each page and overlap each other when rotate)... plus, when I add dynamic content inside each page, the flipping effect bees very shaky...

So now I'm implementing my own flipping effect with css and javascript..

The page structure is like this

<div class="page" id="page1">
    <div class="inner"></div>
</div>
<div class="page" id="page2">
    <div class="inner"></div>
</div>

When the flipping is triggered... I did the following... BUT I find it not elegant because its supposed to be a smooth 180 rotation rather than breaking the action into two.. the problem I have is the z-index.. after rotating -90deg, I want the "back" page to show on top otherwise it will be always the "front" side...

    var front = '<div class="front" style="clip: rect(0px, 2229px, 1315px, 1115px);">' + $('#page2').children('.megafolio-container').html() + '</div>';
    var back = '<div class="back megafolio-container" style="clip: rect(0px, 2229px, 1315px, 1115px);">' + $('#page3').children('.megafolio-container').html() + '</div>';
    var middle = '<div class="middle page"></div>';
    $('.container').append(middle);
    $('.middle').html(front + back);
    $('.middle').height($(window).height());
    $('.middle').width($(window).width());
    $('.middle').css('-webkit-transform', 'rotateY(-90deg)');
    $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear');
    setTimeout(function(){
        $('.middle > .back').css('z-index', 10);
        $('.middle').css('-webkit-transform', 'rotateY(-180deg)');
        $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear');
    }, 500);

I'm building an web application with effect similar to FlipBoard.

At first, I was trying to use this open source. But I don't really like the way it's implemented (create duplicates for each page and overlap each other when rotate)... plus, when I add dynamic content inside each page, the flipping effect bees very shaky...

So now I'm implementing my own flipping effect with css and javascript..

The page structure is like this

<div class="page" id="page1">
    <div class="inner"></div>
</div>
<div class="page" id="page2">
    <div class="inner"></div>
</div>

When the flipping is triggered... I did the following... BUT I find it not elegant because its supposed to be a smooth 180 rotation rather than breaking the action into two.. the problem I have is the z-index.. after rotating -90deg, I want the "back" page to show on top otherwise it will be always the "front" side...

    var front = '<div class="front" style="clip: rect(0px, 2229px, 1315px, 1115px);">' + $('#page2').children('.megafolio-container').html() + '</div>';
    var back = '<div class="back megafolio-container" style="clip: rect(0px, 2229px, 1315px, 1115px);">' + $('#page3').children('.megafolio-container').html() + '</div>';
    var middle = '<div class="middle page"></div>';
    $('.container').append(middle);
    $('.middle').html(front + back);
    $('.middle').height($(window).height());
    $('.middle').width($(window).width());
    $('.middle').css('-webkit-transform', 'rotateY(-90deg)');
    $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear');
    setTimeout(function(){
        $('.middle > .back').css('z-index', 10);
        $('.middle').css('-webkit-transform', 'rotateY(-180deg)');
        $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear');
    }, 500);
Share asked Oct 14, 2013 at 13:37 xialinxialin 7,7569 gold badges38 silver badges66 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 1

Try this "Turnjs" it is a simple Javascript API which enables the flip page effect:

Turnjs

It is very easy to use and one simple example as given in the website is this:

<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>

<script type="text/javascript">
    $("#flipbook").turn({
        width: 400,
        height: 300,
        autoCenter: true
    });
</script>

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745057428a4608752.html

相关推荐

  • javascript - CSS Flipping Page Effect - Stack Overflow

    I'm building an web application with effect similar to FlipBoard.At first, I was trying to use thi

    20小时前
    10

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信