ページをめくるようなエフェクトを実装できる「Page Flip Layout」
codropsに公開されているグリッドを利用したフラットタイプのページめくりを表現した「Page Flip Layout」のアイデアを忘備録もかねて紹介します。
リアルなページめくりのエフェクトはjQueryなどのライブラリで見かけますが、フラットに遷移する「Page Flip Layout」のエフェクトはスタイリッシュで新鮮に感じます。
Page Flip Layout
商品カタログや、美容室・飲食店のメニューなどで効果的にアピールできそうなエフェクトなので参考にしてみてはいかがでしょうか。以上、ページをめくるようなエフェクトを実装できる「Page Flip Layout」を紹介でした。
-
モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」
-
CSSで実装するローディングアニメーション「Single Element CSS Spinners」
-
メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
-
キレイなアニメーションのCSSスピナーコレクション「Epic Spinners」
-
立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」
RELATED POSTS
非レスポンシブの要素をレスポンシブ化する「Reframe.js」
複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
【JS】要素をモーダルウィンドウに変化させる「cta.js」
30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
SVGボタンに様々なエフェクトを実装できる「Distorted Button Effects」
Google Mapのスタイルテンプレート「Snazzy Maps」
