ページをめくるようなエフェクトを実装できる「Page Flip Layout」

 
codropsに公開されているグリッドを利用したフラットタイプのページめくりを表現した「Page Flip Layout」のアイデアを忘備録もかねて紹介します。 リアルなページめくりのエフェクトはjQueryなどのライブラリで見かけますが、フラットに遷移する「Page Flip Layout」のエフェクトはスタイリッシュで新鮮に感じます。

Page Flip Layout

商品カタログや、美容室・飲食店のメニューなどで効果的にアピールできそうなエフェクトなので参考にしてみてはいかがでしょうか。以上、ページをめくるようなエフェクトを実装できる「Page Flip Layout」を紹介でした。



  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • 魅力的なチルトホバーエフェクトを実装できる「Tilt Hover Effects」
  • CSSでクールなグリッチエフェクトを実装できる「CSS Glitch Effect」
  • キレイな装飾のテキストアニメーション「Decorative Letter Animations」
  • 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
RELATED POSTS
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • 【CSS】CSSアニメーションを簡単に作成できる「Animista」
  • 【html】文字実体参照を一覧できる「html arrows」
  • 180種類のグラデーションがまとめられた「WebGradients」
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • 指定したWebサイトが他国でどのように表示されるかチェックできる「GeoScreenshot」
RECENT POSTS
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
  • バナー広告デザインの参考にしたいギャラリーサイト8選
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • CSSで作成する吹き出しとデザインのアイデア