From our sponsor: Leverage AI for dynamic, custom website builds with ease.
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.
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
