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.

By in Playground on
FullscreenLayoutPageTransitions
Demo Code

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Connected Grid Layout Animation

Menu and Thumbnail Stack Animation

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 158

Comments are closed.

  3. It is beautiful!
    I remember visiting a site which had a similar sort of layout. It was a London based site and got featured a lot of late.
    It had 2 panels at the home page – Contact and Blog.

  11. Just wow. I am looking for inspiration everyday and these blogs are just amazing. If this had support for more browsers it would have even more awesome.

  16. Absolutely love it. Implemented it, but is it possible something in the JS blocks the opening of the links / <a> tags?

  21. Great demo! I have one suggestion. Since clicking anywhere on a large box makes it larger, it makes sense to me to click anywhere on the larger box should make it smaller (toggle), rather than having to aim for the little “x” in the upper right corner.

    • That would make it impossible to scroll through, say, blog posts.

      But if you remove the close button code, change find( 'span.sh-icon-close' ) to $section, and remove the event.target line (I think, I’m working off heavily modified code for reference here). That should do it, apologies if I’ve missed anything; I suspect there’ll be a little more tweaking of the JS needed.

  24. I have no word about that’s creativity . This website challenging me to what i have worked in past is just zero . I love this website because it helped me to improve the skills.

  28. Thanks so much for this code and demo. The works page could be improved indeed, I think the close button on a details page should be in the upper-right corner.

  29. Wow amazing!
    So smooth to, not sure about when you go really small looks like it would be go to add a small bar underneat with contact information on mobile? With a button like call me now?

  30. Really neat! Noob question… can you add any content to the large boxes? Say woo-commerce???

  31. This is quite inspiring, and paired with the History API it would make for quite an intuitive and fluid site. Great work!

  33. I’m a little disappointed.
    Because I’m working on the same concept for my portfolio, and your solution ” JavaScript assist” is definitely better than mine (my java sucks).
    Next step for me: adapt this to WP.

    Brilliant demonstration, nicely done.
    Congratulations.

  34. Brilliant example design. Btw, anyway to include keyboard shortcut ‘esc’ to trigger the “X” close panel?

    • You could add a keydown function to the jquery. The close for the close icon is bl-icon-close, so try:
      $(document).on(‘keydown’, function(e){
      if (e.keyCode === 27){
      $(‘span.bl-icon-close’).click(); }
      });

  35. First of all, I absolutely love this way of re-thinking webdesign! I’m a student and need a portfolio website to show off my work to search for an internship and was wondering if I could use this code as the base for my website? I will be editing parts of it to my needs if it’s okay with you. Again, great work!

  41. 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?

    • 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; }

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

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