ページをめくるようなエフェクトを実装できる「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」
