Experimental Page Layout Inspired by Flipboard. An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard.
View demo Download source Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.
For the demo, we’ve made a little booklet with some placeholder text and images from NASA HQ. Please notice that this is very experimental and just a proof-of-concept. There are probably still many undiscovered bugs and although Safari and Chrome support all the properties used, we had to apply a couple of hacks to overcome some unexpected behavior. Some of the jQuery plugins we are using for this: A great help for creating responsive layouts like these is this: Experimental Page Layout Inspired by Flipboard. Blueprint: Responsive Content Slider. Nested Accordion. A simple, nestable accordion with some examples of nesting levels and a media query.
View demo Download source A simple accordion that allows for a nested structure. The style comes with some examples of how to style three levels and how to add a media query for decreasing the size on smaller screens. Clicking a trigger element will open the content. The HTML <ul id="cbp-ntaccordion" class="cbp-ntaccordion"><li><h3 class="cbp-nttrigger">Oat cake tootsie roll</h3><div class="cbp-ntcontent"><p></p><ul class="cbp-ntsubaccordion"><li><h4 class="cbp-nttrigger">Donut pastry</h4><div class="cbp-ntcontent"></div></li><li><h4 class="cbp-nttrigger">Carrot cake</h4><div class="cbp-ntcontent"><ul class="cbp-ntsubaccordion"><li><h5 class="cbp-nttrigger">Donut pastry</h5><div class="cbp-ntcontent"></div></li><li></li><li></li></ul></div></li><li><h4 class="cbp-nttrigger">Tootsie roll marshmallow</h4><div class="cbp-ntcontent"></div></li></ul></div></li><li></li><li></li><li></li></ul> The CSS.
Vertical Timeline. A responsive vertical timeline layout with icons and example media queries.
View demo Download source This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list. The HTML. Blueprint: Vertical Timeline. Genogram. Perspective Page View Navigation. Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.
This navigation idea is seen in mobile app design and we wanted to explore some more effects. View demo Download source Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations.
We’ve experimented a bit and we’ve come up with a small set of effects that take the page and move it in 3D to reveal a navigation (or some other content if you like). Please note that this is highly experimental, so let us know if you find any bugs or problems. For the general effect to work, we need to wrap our page into a perspective wrapper. When we trigger the effect, we’ll need to change the position and overflow of the divisions to just show the current view. There are two styles for the menus which is a horizontal and a vertical one.
"Look Inside" Book Preview with BookBlock. A "look inside" book preview with BookBlock.
A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation. View demo Download source There is something really fascinating about (real) books. Although we live in times where everything is digitalized by now, there is really nothing like picking up a real book and browsing through the pages. Many layouts on the web try to transmit that feeling by creating book-like experiences. Please note that this is just a proof-of-concept and might not work properly in older browsers.
For the book grid we use figures and this is how it looks: When we click on “view details”, we rotate the book in 3D and move it to the left side, allowing for the details to slide in from the right: Once “look inside” is clicked we perform a series of animations on the book, its cover and the BookBlock. Credits.