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

PageFlipLayout_featured

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.

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

Previous:



Source link https://tympanus.net//2018/11/12/page-flip-layout/

LEAVE A REPLY

Please enter your comment!
Please enter your name here