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

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

Page Flip Layout

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



  • 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • 立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」
  • 手描きのアニメーションGIFを簡単に作成できる「Brush Ninja」
  • 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
RELATED POSTS
  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」
  • Webサイト・スマホアプリなどのUIデザインギャラリー「UIPatternHub」
  • コピペで使えるCSSアニメジェネレーター「WAIT! Animate」
  • vue.jsを使用したプロジェクトをまとめたサイト「made with vue.js」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 【2020年版】無料で使えるフリーイラスト素材サイト32選(商用利用可)
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】