Fullscreen Layout with Page Transitions

A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.
FullscreenLayoutPageTransitions

From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today.

FullscreenLayoutPageTransitions

View demo Download source

Today we’d like to share an experimental responsive layout with you. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

Please note: this only works as intended in browsers that support the respective CSS properties.

The beautiful illustrations used in the works section of the demo are by talented Isaac Montemayor.

Let’s take a look at some screenshots:

FullscreenLayoutPageTransitions01

The initial screen has the four flexible boxes. Resize the browser window to see them adapting fluidly.

FullscreenLayoutPageTransitions02

When clicking on a box, it get’s expanded to fullscreen.

FullscreenLayoutPageTransitions03

The view of a box that is expanded. A content are is revealed and we add a scroll to it when needed.

FullscreenLayoutPageTransitions04

In the works section, we add a thumbnail grid which will reveal a details panel once we click on an item. The page transition here is the new item sliding in from the bottom and the old view scaling down and disappearing in the back.

FullscreenLayoutPageTransitions05

The navigation through the items has the same page transition. When we close the item view, it will transition back down and the works view will scale back up again.

We hope you like this little experiment and find it inspiring!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 158

Comments are closed.
  1. 1

    how do i change the color of the background when the page expands? for example, when you click on about, it expands with more content and the background color is red…how do i change the red?

    • 2

      in component.css


      /*LINE 61 these four have the un-expanded background colors*/
      .bl-main > section:first-child {
      top: 0;
      left: 0;
      background: #000000;
      }

      .bl-main > section:nth-child(2) {
      top: 0;
      left: 50%;
      background: #FA987D;
      }

      .bl-main > section:nth-child(3) {
      top: 50%;
      left: 0;
      background: #72CCA7;
      }

      .bl-main > section:nth-child(4) {
      top: 50%;
      left: 50%;
      background: #10A296;
      }
      /*LINE 374 these four have the expanded background colors*/
      .bl-main > section:first-child.bl-expand {
      background: #EE4444;
      }
      .bl-main > section:nth-child(2).bl-expand {
      background: #F98262;
      }
      .bl-main > section:nth-child(3).bl-expand {
      background: #4BBE8E;
      }
      .bl-main > section:nth-child(4).bl-expand {
      background: #0D8278;
      }

  2. 7

    I cant wait to use it. awesome stuff. sure i will following this from today.. thankyou Manoela

  3. 8

    Woow this is brilliant and inspiring. This goes with my philosophy of Less is More. Is there permission to convert this into WP?

  4. 13

    Hi Mary,

    it’s a great page. thanks for inspiration. hopefully you will submit next great idea. thanks.

  5. 15

    I like it. It’s simple yet beautiful. I love the color harmony.

  6. 16

    IE ‘question mark’? Why do people still hate on it? If you’re compliant IE 10 will work just fine, and IE 9 may if you’re not using anything too outrageous… Disclaimer: haven’t looked at the source yet.
    Works on my WP8 version of IE10.

    At least treat the browser like a first class citizen; as of 10 it can hold it’s own reasonably well..

  7. 18

    in regards to your browser support, this actually works in ie10, and has an error in the latest firefox.

  8. 21

    H i _ ! ! !
    . . . what to say . . .
    . . . inspiring . . . “As Always” . . . @Mary Lou
    After so much [ S t e a l i n g ]_ my first written “silly” & “easy” contribution
    To avoid Standard scrollbars, use this (just webkit browsers).
    Ty , Ichtyo


    ::-webkit-scrollbar {
    width: 12px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*background: rgba(255,0,0,0.8); */
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
    }

    • 23

      . . . you_R_welcome
      P.S.
      . . . 4_the_Rookies: tht code goes into the css
      ^__^

    • 24

      In reply to this awesome solution for the scrollbar (kudos, ichtyo!), I tweaked it a little to fit the style of “X” buttons perfectly:


      ::-webkit-scrollbar {
      width: 10px;
      }
      /* Track */
      ::-webkit-scrollbar-track {
      background-color: rgba(255, 255, 255, 0.2);
      -webkit-border-radius: 10px;
      border-radius: 10px;
      }
      /* Handle */
      ::-webkit-scrollbar-thumb {
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background: #FFF;

      }
      ::-webkit-scrollbar-thumb:window-inactive {
      background: #DDD;
      }

  9. 25

    Hi Mary,

    I love Your fantasy and I would like to use this demo for my portfolio site. Please help me, because it does not work in ie 8, 9. And it is problem for me, because a lot of people use older browsers in my site. I use Analytics and it show me browsers versions.

    Thanks, for Your answer.

    Marion

Comments are closed.