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: monday.com is the last team management and design process tool youโ€™ll ever need. Start your free trial.Advertisement

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:

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.

http://www.codrops.com

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

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. Hello, excellent work!

    Is it possible to simulate the hover effect when hovering a menu (in a different part of the page)?
    I managed to simulate the click by doing the code below but the same “logic” doesn’t work (nothing happens) with hover.

    $("#menuItemID").on('click', function() {
    $(".bl-expand").children('.bl-icon-close').trigger('click');
    $('#idOfInnerSpan').trigger('click');
    });

  2. Iยดm experimenting with this using a WordPress framework and got it to work with 6 boxes also. Question: Does anybody know a polyfill to make the page-transitions (translateY and similar) work in older browsers, too (especially IE of course, urgh…)?

    • SiGa.

      Have you got this into WordPress as it’s own theme? I would be sooo interested in that….

  3. Wow, Mary Lou! I must say that you continually impress and me and have inspired me to take my understanding of javascript and css to the next level. Also, how awesome would this be combined with the Gamma gallery? Off tha hook! Thanks again! You are the best! ๐Ÿ™‚

  4. Hello,
    I’m new here and was wondering if it was possible to change the icons? How would I go about it?
    thank you

  5. what if I want to make 6 boxes?
    and each box is the same style with the box “work” (can display images, and each image description)
    I tried to multiply the id ‘work-items’ but it doesn’t work
    and I can not make a responsive 6 boxes stack ( I tried to modified the nth child- and it doesn’t work too ๐Ÿ™ _
    can anyone help me? thank you in advance
    ! bad english sorry

    • make these changes in css and put two more div
      .bl-main > section {
      position: absolute;
      width: 32%;
      height: 48%;
      }

      .bl-main > section:first-child {
      top: 0;
      left: 0;
      background: #F06060;
      }

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

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

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

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

      .bl-main > section:nth-child(6) {
      top: 50%;
      left:66%;
      background: #72CCA7;
      }
      ๐Ÿ™‚

  6. hi! truly inspiring stuff!

    one thing i could need a piece of advice on though:

    in the works section the close button is on the top-right corner:

    .bl-main > section .bl-icon-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    }

    how can i apply this same positioning (top right) to the close button and ‘next project’ link for the individual work? – i.e.:

    div.bl-panel-items nav {
    position: absolute;
    z-index: 9999;
    width: 216px;
    left: 50%;
    top: 0px;
    margin-left: -108px;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out 0.5s;
    -moz-transition: opacity 0.2s ease-in-out 0.5s;
    transition: opacity 0.2s ease-in-out 0.5s;
    }

    have tried a good number of things with this – any help appreciated!

    • I see that the ‘top’ value here can be manipulated to move the individual works’ close buttons around:

      div.bl-panel-items.bl-panel-items-show nav {
      opacity: 1;
      top: -70px;
      }

      however it isn’t ideal, as it does not match the position of the other close button, and gets really messy on browser re-size!

  7. Thank you for this great design. Again I learn a lot in website creations. Ik do have a question though: Has anyone used Lightbox in this design? I’ve tried to get it in here but for some reason it keeps refusing whatever I try to do. Because I’m not a pro I might be doing something silly so any help would be appreciated.

  8. Hi!

    I tried to change just the font from the texts in the home page but i couldn’t.
    It’s possible to have the icons with the icomoon font and the texts with another font?

    Thanks!

  9. Hi,

    I tried experimenting with this layout. However, i have trouble writing <a> tags in the html file. Whenever I try putting a link, it always have the index.html file as its base url. Any idea how to correct that?

    thanks

  10. I’m very thankful to you for this wonderful code…
    but i’m having a problem using this design , i’m applying form inside a box and submit button doesn’t work in that …
    as i click on Submit the page Reloads , Please help me out…

  11. Thanks for your great work!
    I tried to put a flash content in the details panel. I am able to see my flash content but the interaction in my flash content doesn’t work. Do you know why?