Page Flip Layout

Original Source: http://feedproxy.google.com/~r/tympanus/~3/DrqIsKILhiE/

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.

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):

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

We hope you enjoy this layout and find it useful!

References and Credits

Images from Unsplash.com
TweenMax by Greensock
imagesLoaded by Dave DeSandro

Page Flip Layout was written by Mary Lou and published on Codrops.