HTML5で本のようにページをめくるような効果はありますか?もしそうなら、それはどのように行われますか?
前もって感謝します!
これは、CSS アニメーションの更新で行われた別のページめくりアニメーションです: ARCHIVE.ORG URL でリンクを置き換えました。方法論は、 Roman Cortes のインスパイアされたオリジナルに基づいています。
これが構築される方法は、各右側のページが 2 つの div 内で二重にネストされることです。内側の div は、ページが表示されるように、外側の div 内のページの上の回転ポイントを中心に 30 度回転します。外側の div も、同じ回転ポイントを中心に約 15 度回転して表示されます。これは、overflow:hidden で構成され、内側の div ページのクリッピング コンテナーとして機能します。z-indexing は、ページを互いの上に積み重ねるために使用されます。
各ページは、ページをめくるにつれて影が増減するように、x 軸でスケーリングされた灰色の漸進的不透明度グラデーションでオーバーレイおよびアンダーレイされます。
コードは少し複雑ですが、ソースを表示するのはとても簡単です
ページめくり効果には jQuery プラグインを使用できます。
以下はjQueryのプラグインへのリンクです。
http://plugins.jquery.com/plugin-tags/page-flip
http://builtbywill.com/code/booklet/でデモを見つけることができます。
これが役立つことを願っています。
これには CSS 変換を使用できます。
詳細: http://www.the-art-of-web.com/css/css-animation/
または、こちら (現在 Webkit ブラウザーでのみ利用可能) http://www.romancortes.com/blog/pure-css3-page-flip-effect/
turn.jsは、HTML5 を使用して非常にリアルなページめくり効果を作成する jQuery 用のプラグインです。これは素敵な効果であり、プラグインは実装と構成が簡単で要求の少ない方法で記述されています。