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

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

Celý článek

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

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

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace