Page Flip Layout

A template with a two-sided, magazine-like layout and a flat page flip animation. The layout is powered by CSS Grid.
PageFlipLayout_featured

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

Today we’d like to share a flat take on a magazine-like layout with a “page flip” animation. When navigating, the content gets covered and then the next “pages” show. Depending on how far the pages are apart (when choosing a page from the menu), we show multiple elements to cover the content, creating a flat page flip look. We’ve added a little visual indicator on each page side, representing a book cover. The indicator will grow, depending on which page we’re currently at.

The animations are powered by TweenMax.

Attention: Note that we use modern CSS properties like CSS Grid and CSS Custom Properties that are not supported in older browsers.

The layout consists of a custom CSS grid setting for every “page”. We don’t really divide the two sides, but simulate it by adding a middle line. To make a custom grid, we use a 20×20 cell structure and add a custom position for every figure using the grid-area property.

PageFlipLayout_first

The menu allows us to jump between pages. The blue lines on each side of the screen serve as a decorative indicator, resembling a book cover (viewed from inside of a book):

PageFlipLayout_menu

The flat “page flip” animation is made up of several layers if we go to a page that is “further away”.

PageFlipLayout_all

We hope you enjoy this layout and find it useful!

References and Credits

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.