web-dev-qa-db-ja.com

HTML5のページめくり効果?

こんにちはHTML5の本のようにページをめくる効果を持つことは可能ですか?もしそうなら、それはどのように行われますか?

前もって感謝します!

22
questor

これが別の CSSアニメーションで行われるページフリップアニメーション 更新です:リンクをARCHIVE.ORG URLに置き換えます。方法論は Roman Cortesのインスピレーションを得たオリジナル に基づいています。

これが構築される方法は、各右側のページが2つのdiv内に二重にネストされることです。内側のdivは、ページが見えるように、外側のdiv内のページの上の回転点を中心に30度回転します。外側のdivも同じ回転ポイントを中心に約15度回転して表示されます。これは、overflow:hiddenで構成され、内部のdivページのクリッピングコンテナーとして機能します。 z-indexingは、ページを互いに積み重ねるために使用されます。

各ページは、グレーのプログレッシブ不透明度のグラデーションでオーバーレイおよびアンダーレイされます。これは、x軸でスケーリングされ、ページをめくると影が変化します。

コードは少し複雑ですが、ソースの表示はかなり簡単です

11
Michael Mullany

JQueryプラグインを使用して、ページめくり効果を実現できます。

以下はjQueryのプラグインへのリンクです。

http://plugins.jquery.com/plugin-tags/page-flip

http://builtbywill.com/code/booklet/ でデモを見つけることができます

これがお役に立てば幸いです。

8
eHussain

これにはCSS変換を使用できます。

詳細: http://www.the-art-of-web.com/css/css-animation/

またはここ(現在Webkitブラウザーでのみ使用可能) http://www.romancortes.com/blog/pure-css3-page-flip-effect/

5
LiamB

turn.js は、HTML5を使用して非常に現実的なページめくり効果を作成するjQueryのプラグインです。これは素敵な効果であり、プラグインの実装と構成がシンプルで要求の少ない方法で記述されています。

2
Chris Fowler