1

FlipBoard に似た効果を持つ Web アプリケーションを構築しています。

最初は、このオープンソースを使おうとしていました。しかし、私はそれが実装されている方法があまり好きではありません (ページごとに複製を作成し、回転時に互いにオーバーラップします)...さらに、各ページ内に動的コンテンツを追加すると、反転効果が非常に不安定になります...

だから今、私はcssとjavascriptを使って独自の反転効果を実装しています..

ページ構成はこんな感じ

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

反転がトリガーされたとき...私は次のことを行いました...しかし、アクションを2つに分割するのではなく、スムーズな180回転であるはずなので、エレガントではないと思います..私が抱えている問題はz-indexです.. -90度回転させた後、「裏」ページを一番上に表示したいのですが、それ以外の場合は常に「表」側になります...

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

1 に答える 1

1

この「Turnjs」を試してみてください。これは、フリップページ効果を有効にするシンプルな Javascript API です。

ターンズ

使い方はとても簡単で、ウェブサイトにある簡単な例は次のとおりです。

<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>
于 2015-03-04T19:23:13.470 に答える